Question

我认为问题出在jQuery上，我不确定。

让我解释一下情况。

截屏1

我填写了partialView并点击了提交。

submit是一个jQuery事件处理程序，包含以下代码：

_CreateOrEdit.cshtml

<script type="text/javascript">
$(document).ready(function () {

    $('input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea', '.form').iTextClear();
    $("input:checkbox,input:radio,select,input:file").uniform();
    $("input[type=date]").dateinput();


});
$(window).bind('drilldown', function () {
    $(".tabs > ul").tabs("section > section");
});
$("#CreateOrEditSubmit").submit(function () {
    //get the form
    var f = $("#CreateOrEditSubmit");
    //get the action
    var action = f.attr("action");
    //get the serialized data
    var serializedForm = f.serialize();
                $.post(action, serializedForm, function (data) {
                    $("#main-content").html(data);
                });
    return false;

});
</script>

这在首次运行时效果很好。

然后当我无效时提交表格（截图1），

        [HttpPost]
    public ActionResult Create(Client client)
    {

        if (ModelState.IsValid)
        {
            context.Clients.Add(client);
            context.SaveChanges();
            return RedirectToAction("Index");  
        }

        return PartialView(client);
    }

然后它再次尝试重新显示相同的表单（Controller Client，Action Create），但是没有触发某些内容（截图2）。布局错误（按钮仍然隐藏），标签不工作（javascript），...

最糟糕的是，我在Firebug，Chrome控制台中没有出现任何错误......

有没有人知道可能是什么问题，因为我真的不知道发生了什么。在我看来，没有任何改变，但确实没有改变：s

Fyi，post函数的等价物是：

 var request = $.ajax({
        type: 'POST',
        url: action,
        data: serializedForm,
        success: function (data) {
            $("#main-content").html(data);
        },
        dataType: 'HTML'
    });

    request.done(function (msg) {
        $("#log").html(msg);
    });

    request.fail(function (jqXHR, textStatus) {
        alert("Request failed: " + textStatus);
    });

Screenshot 1 Screenshot 2

在提交之前，一切都很正常

提交后，调用相同的表单。 jQuery不再工作了，表单变得越来越糟糕（我认为这是jQuery破解的“侧面”行为）

编辑:(根据要求）这是完整的部分视图

_CreateOrEdit.cshtml现在不包含任何javascript，结果是一样的，所以我只发布了Create.cshtml。

Create.shtml

@model BillingSoftwareOnline.Domain.Entities.Client

<div class="container_12 clearfix leading">
<div class="grid_12">
    @using (Html.BeginForm("Create", "Client", FormMethod.Post, new { @class="form has-validation", id="CreateOrEditSubmit"}))
    {

        @Html.Partial("_CreateOrEdit", Model)

        <div class="form-action clearfix">
            <button class="button" type="submit">
                OK</button>
            <button class="button" type="reset">
                Reset</button>
        </div>
    }
</div>
</div>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.itextclear.js")">    </script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.uniform.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.tools.min.js")">    </script>



<script type="text/javascript">
$(document).ready(function () {

    $('input[type=text], input[type=password], input[type=url], input[type=email],     input[type=number], textarea', '.form').iTextClear();
    $("input:checkbox,input:radio,select,input:file").uniform();
    $("input[type=date]").dateinput();


});
$(window).bind('drilldown', function () {
    $(".tabs > ul").tabs("section > section");
});
$("#CreateOrEditSubmit").submit(function () {
    //get the form
    var f = $("#CreateOrEditSubmit");
    //get the action
    var action = f.attr("action");
    //get the serialized data
    var serializedForm = f.serialize();
    //                $.post(action, serializedForm, function (data) {
    //                    $("#main-content").html(data);
    //                });
    var request = $.ajax({
        type: 'POST',
        url: action,
        data: serializedForm,
        success: function (data) {
            $("#main-content").html(data);
        },
        dataType: 'HTML'
    });
    return false;

    request.done(function (msg) {
        alert(msg);
    });

    request.fail(function (jqXHR, textStatus) {
        alert("Request failed: " + textStatus);
    });



});

</script>

Answer 1

由于此标记作为部分返回，因此您需要重新初始化您的javascript。

这很麻烦，但是尝试将您的脚本放在局部视图中，而不是_CreateOrEdit.cshtml，看看是否有效。

<强>更新

看到cshtml之后，看起来它不起作用，因为在ajax加载之前$（document）.ready（）已经执行了。试试这个：

$(function () {
    $('input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea', '.form').iTextClear();
    $("input:checkbox,input:radio,select,input:file").uniform();
    $("input[type=date]").dateinput();

    $(window).bind('drilldown', function () {
        $(".tabs > ul").tabs("section > section");
    });
   $("#CreateOrEditSubmit").submit(function () {
        //get the form
        var f = $("#CreateOrEditSubmit");
        //get the action
        var action = f.attr("action");
        //get the serialized data
        var serializedForm = f.serialize();
        //                $.post(action, serializedForm, function (data) {
        //                    $("#main-content").html(data);
        //                });
        var request = $.ajax({
            type: 'POST',
            url: action,
            data: serializedForm,
            success: function (data) {
                $("#main-content").html(data);
            },
            dataType: 'HTML'
        });
        return false;

        request.done(function (msg) {
            alert(msg);
        });

        request.fail(function (jqXHR, textStatus) {
            alert("Request failed: " + textStatus);
        });
    });
});

Answer 2

将以下说明添加到ajax回调的末尾，以便在将表单注入DOM后应用样式：

$('input[type=text], input[type=password], input[type=url], input[type=email],     input[type=number], textarea', '.form').iTextClear();
$("input:checkbox,input:radio,select,input:file").uniform();
$("input[type=date]").dateinput();
$(".tabs > ul").tabs("section > section");

$ .submit表单和使用ajax替换div在新的partialview上有奇怪的jquery行为

2 个答案: