Question

我正在使用的系统是CMS，您可以在其中插入联系表单模板等模板并将其保存到数据库。此模板针对服务器端进行编码以处理数据。

现在我的“contentDiv”在所有模板的插入和保存形式之内，而不是在页面上显示的withint form标签包裹如

@using (Html.BeginForm("Edit", "Home", FormMethod.Post, new { id = "first" }))
{
    @Html.Hidden("someId", @Model.PageId)

}

<div id="contentDiv"  style="width:100%">@Html.Raw(Model.Html)</div>

上面的表格不会保存为

$(function () {
    $("form#first").submit(function (e) {
        e.preventDefault();

        var viewmodel = {
            Id: $("#someId").val(),
            Html: $("#contentDiv").val()
        };

        $.ajax({
            url: $(this).attr("action"),
            type: "POST",
            data: JSON.stringify(viewmodel),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            beforeSend: function () { $("#status").fadeIn(); },
            complete: function () { $("#status").fadeOut(); },
            success: function (data) {
                var message = data.Message;

            },
            error: function () {

            }
        });
    });
});

请注意，我将“contentDiv”移出了表单标记，因为我的联系表单包含在表单标记中，不能嵌套在id = first表单中。

是否有形成嵌套的解决方案？。如果不是

我的另一个问题是

contentDiv没有包含在表单标记中，这意味着如果客户端浏览器禁用了javascript，他将无法将contentDiv数据发布到服务器并且表单将无用。

怎么办？

如果我不将formDiv移出form标签而不是插入模板后，结构将嵌套表单

@using (Html.BeginForm("Edit", "Home", FormMethod.Post, new { id = "first" }))
    {
<form id="contactform" action="/Home/Email"  method="post" >                
    <div class="clear" style="padding-bottom:10px;"></div>

    <div class="formCaption">Full Name</div>
    <div class="formField"><input id="fullName" name="fullName" class="standardField" /></div>




    <div><input id="sendBtn" value="Send" type="button" /></div>
</form> 
}

Answer 1

我从你的描述中不明白为什么html需要在表单之外。此外，您不应该使用.val()方法进行div。您应该使用.html()：

var viewmodel = {
    Id: $("#someId").val(),
    Html: $("#contentDiv").html()
};

当然因为你使用javascript来获取主窗体之外的html如果客户端浏览器禁用了javascript，那么表单就没用了。只有当您在主窗体中移动html时才能使用javascript：

@using (Html.BeginForm("Edit", "Home", FormMethod.Post, new { id = "first" }))
{
    @Html.HiddenFor(x => x.PageId)
    @Html.HiddenFor(x => x.Html)
    <input type="submit" value="Edit" />
}

<!-- 
You could still keep the div for preview or something but don't make 
any use of it when submitting.
-->
<div id="contentDiv" style="width:100%">
    @Html.Raw(Model.Html)
</div>

如果textarea不具有表单嵌套问题，则调用Ajax

1 个答案: