Ajax call, если textarea не в форме, а также проблема с вложенностью формы

Question

Система, над которой я работаю, - это CMS, в которую вы вставляете шаблоны, такие как шаблон формы контакта, и сохраняете их в базе данных. Этот шаблон закодирован на стороне сервера для обработки данных.

Теперь мой "contentDiv" внутри формы, куда были вставлены и сохранены все шаблоны, чем показано на странице, с тегом формы inint, обернутым как

@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 = первую форму.

Есть ли решение для формирования вложения? . Если нет, то

Мой другой вопрос

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 должен быть за пределами формы.Также вы не должны использовать метод .val() для divs.Вы должны использовать .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>