我的模式彈出窗口中的.submit（function（））不起作用，我的模式彈出窗口將發送正常的http發布請求

Question

我正在處理一個asp.net mvc Web應用程序。 在我的主視圖上，我得到以下創建鏈接：-

    <a class="btn btn-success" data-modal="" href="/Staff/Create" id="btnCreate">
    <span class="glyphicon glyphicon-plus"></span>      
    </a>


<!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>
</div>

而且我有以下腳本：

$(function () {
    $.ajaxSetup({ cache: false });
    $("a[data-modal]").on("click", function (e) {

        $('#myModalContent').load(this.href, function () {
            $('#myModal').modal({
                keyboard: true
            }, 'show');
            $('#myModalContent').removeData("validator");
            $('#myModalContent').removeData("unobtrusiveValidation");
            $.validator.unobtrusive.parse('#myModalContent');
            bindForm(this);
        });
        return false;
    });


});

function bindForm(dialog) {
    $('#myModalContent', dialog).submit(function () {

        if ($('#myModalContent').valid()) {
            $('#progress').show();
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    if (result.success) {
                        $('#myModal').modal('hide');
                        $('#progress').hide();
                        //location.reload();
                        alert('www');
                    } else {

                        $('#progress').hide();
                        $('#myModalContent').html(result);
                        bindForm();
                    }
                }
            });
     }
        else {
           return false;
   }
    });
}

現在，當我單擊“創建”鏈接時，“創建”操作方法將返回以下部分視圖，該視圖將在模式彈出窗口中呈現：-

@model SkillManagement.Models.Staff

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Staff</h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.LabelFor(model => model.GUID, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.GUID)
                @Html.ValidationMessageFor(model => model.GUID)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.UserName, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.UserName)
                @Html.ValidationMessageFor(model => model.UserName)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.IsExternal, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.IsExternal)
                @Html.ValidationMessageFor(model => model.IsExternal)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName)
                @Html.ValidationMessageFor(model => model.FirstName)
            </div>
        </div>

        //code goes here
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

到現在為止，我一切正常，將調用Get Create操作方法，並將部分視圖呈現在模式彈出窗口中。

但是現在在我的局部視圖中，如果我單擊“創建”按鈕，則將調用“發布創建操作”方法，但不是由於javascript代碼。 當我在Post create action方法中檢查Request.IsAjax() ，我得到它不是ajax請求，這意味着部分視圖發送的是正常的Post http，而不是腳本中定義的ajax請求，任何人都可以建議什么我目前的做法是錯的嗎？ 謝謝

Answer 1

如您所見，您只需將#myModalContent節點傳遞給bindForm函數，jQuery選擇器將查找

// will never find #myModalContent
$('#myModalContent', myModalContentDOMElement).submit(function () {

相反，你應該做這樣的事情

$('form', dialog).submit(function (e) {
    e.preventDefault(); // stop the default form submit action

Answer 2

您正在通過ajax將表單加載到頁面中，但是如果您希望表單本身使用ajax，則您正在加載的表單是常規的html表單，我相信您正在尋找@Ajax.BeginForm() 。

msdn文檔

@using (Ajax.BeginForm({objectparams})){
...