asp.net mvc 3-Ajax调用，如果文本区域不在表单中，也存在表单嵌套问题

Question

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

现在，我在表单中的"contentDiv"，所有模板都被插入并保存，而不是在像一样包装的表单标签中显示在页面上

@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-form.中

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

我的另一个问题是

contentDiv并没有封装在表单标签中，这意味着如果客户端浏览器禁用了javascript，他将无法将contentDiv数据发布到服务器，表单也将毫无用处。

该怎么办？

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

@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需要在表单之外。此外，你不应该对div使用.val()方法。您应该使用.html():

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

当然，因为您正在使用javascript获取主表单之外的html，如果客户端浏览器禁用了javascript，则该表单将毫无用处。只有在没有javascript:的情况下，将html移动到主表单中才能工作

@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>