如何在视图中以mvc形式调用javascrpit函数?

javascript jquery asp.net-mvc asp.net-mvc-4

103 观看

1回复

28 作者的声誉

在单页Web表单中,我有多步骤注册表单。当我最初单击第一个表单时,当我单击下一个按钮时,将显示文本框,而button的值将变为javascript代码。因此,如何在asp.net MVC中的下一个按钮函数上调用javascript。

 <section class="box-typical box-panel mb-4">
            <header class="box-typical-header">
                <div class="tbl-row">
                    <div class="tbl-cell tbl-cell-title">
                        <h3>Company Registration Form</h3>
                    </div>
                </div>
            </header>
            <div class="box-typical-body">
                @using (Html.BeginForm("AddCompany", "Company", FormMethod.Post, htmlAttributes: new { id = "example-form", @class = "form-wizard" }))
                {
                    @Html.AntiForgeryToken()
                    @Html.ValidationSummary(true)
                    <div>
                        <h3>Company Registration</h3>
                        <section>
                            <div class="row">
                                <div class="col-lg-4">
                                    <fieldset class="form-group">
                                        @Html.LabelFor(model => model.CompanyName, new { @class = "form-label semibold" })
                                        @Html.TextBoxFor(model => model.CompanyName, new { @class = "form-control", placeholder = "Enter the Company Name" })
                                        @Html.ValidationMessageFor(model => model.CompanyName)
                                    </fieldset>
                                </div>
                                <div class="col-lg-4">
                                    <fieldset class="form-group">
                                        @Html.LabelFor(model => model.ShortName, new { @class = "form-label semibold" })
                                        @Html.TextBoxFor(model => model.ShortName, new { @class = "form-control", placeholder = "Enter the Short Name" })
                                        @Html.ValidationMessageFor(model => model.ShortName)
                                    </fieldset>
                                </div>
                                <div class="col-lg-4">
                                    <fieldset class="form-group">
                                        @Html.LabelFor(model => model.Division, new { @class = "form-label semibold" })
                                        @Html.TextBoxFor(model => model.Division, new { @class = "form-control", placeholder = "Enter the Division" })
                                        @Html.ValidationMessageFor(model => model.Division)
                                    </fieldset>
                                </div>
                            </div><!--.row-->
                            <div class="row">
                                <div class="col-lg-4">
                                    <fieldset class="form-group">
                                        @Html.LabelFor(model => model.Email, new { @class = "form-label semibold" })
                                        @Html.TextBoxFor(model => model.Email, new { @class = "form-control", placeholder = "Enter your Email" })
                                        @Html.ValidationMessageFor(model => model.Email)
                                    </fieldset>
                                </div>
                                <div class="col-lg-4">
                                    <fieldset class="form-group">
                                        @Html.LabelFor(model => model.ShortName, new { @class = "form-label semibold" })
                                        @Html.TextBoxFor(model => model.ShortName, new { @class = "form-control", placeholder = "Enter the Short Name" })
                                        @Html.ValidationMessageFor(model => model.ShortName)
                                    </fieldset>
                                </div>
                                <div class="col-lg-4">
                                    <fieldset class="form-group">
                                        @Html.LabelFor(model => model.Division, new { @class = "form-label semibold" })
                                        @Html.TextBoxFor(model => model.Division, new { @class = "form-control", placeholder = "Enter the Division" })
                                        @Html.ValidationMessageFor(model => model.Division)
                                    </fieldset>
                                </div>
                            </div><!--.row-->
                        </section>

                        <h3>Company Reference</h3>
                        <section>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Address</label>
                                <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter text" required>
                                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                            </div>
                        </section>
                        @*<h3>Company Social Network</h3>
                            <section>
                                <ul>
                                    <li>Foo</li>
                                    <li>Bar</li>
                                    <li>Foobar</li>
                                </ul>
                            </section*@>
                        <h3>Company Social Network</h3>
                        <section>
                            <div class="form-group">
                                <div class="checkbox">
                                    <input type="checkbox" id="agree" class="required" required>
                                    <label for="agree">Terms and Conditions</label>
                                </div>
                            </div>
                        </section>
                    </div>
                }

            </div>

        </section>

的JavaScript

<script>
        $(function () {
            $("#example-basic ").steps({
                headerTag: "h3",
                bodyTag: "section",
                transitionEffect: "slideLeft",
                autoFocus: true
            });

            var form = $("#example-form");
            form.validate({
                rules: {
                    agree: {
                        required: true
                    }
                },
                errorPlacement: function errorPlacement(error, element) { element.closest('.form-group').find('.form-control').after(error); },
                highlight: function (element) {
                    $(element).closest('.form-group').addClass('has-error');
                },
                unhighlight: function (element) {
                    $(element).closest('.form-group').removeClass('has-error');
                }
            });

            form.children("div").steps({
                headerTag: "h3",
                bodyTag: "section",
                transitionEffect: "slideLeft",
                onStepChanging: function (event, currentIndex, newIndex) {
                    form.validate().settings.ignore = ":disabled,:hidden";
                    return form.valid();
                },
                onFinishing: function (event, currentIndex) {
                    form.validate().settings.ignore = ":disabled";
                    return form.valid();
                },
                onFinished: function (event, currentIndex) {
                    alert("Submitted!");
                }
            });

            $("#example-tabs").steps({
                headerTag: "h3",
                bodyTag: "section",
                transitionEffect: "slideLeft",
                enableFinishButton: false,
                enablePagination: false,
                enableAllSteps: true,
                titleTemplate: "#title#",
                cssClass: "tabcontrol"
            });
        });
    </script>

按钮点击事件代码

function paginationClickHandler(event)
{
    event.preventDefault();

    var anchor = $(this),
        wizard = anchor.parent().parent().parent().parent(),
        options = getOptions(wizard),
        state = getState(wizard),
        href = anchor.attr("href");

    switch (href.substring(href.lastIndexOf("#") + 1))
    {
        case "cancel":
            cancel(wizard);
            break;

        case "finish":
            finishStep(wizard, state);
            break;

        case "next":
            goToNextStep(wizard, options, state);
            break;

        case "previous":
            goToPreviousStep(wizard, options, state);
            break;
    }
}

如何将下一个按钮函数上的javascript调用到asp.net MVC控制器中

[HttpPost]
        public ActionResult AddCompany(Company cmp)
        {

            try
            {

                if (ModelState.IsValid)
                {

                }

                return View();
            }

            catch
            {
                return View();
            }

        }
作者: Vanuston Intelligence 的来源 发布者: 2017 年 9 月 15 日

回应 1


0

197 作者的声誉

老实说,我并没有阅读所有代码,但是您可以通过执行以下操作从JavaScript调用控制器:

$.post("@Url.Action("Company","AddCompany")", 
    { 
       id : $(this).data("companyId")
       /*More fields here...*/
    }, function(data)
    {
       alert(data);
    }
作者: RottenCheese 发布者: 2017 年 9 月 15 日
32x32