Question

视图1

@model WebApplication2.Models.TestViewModel

@using (Html.BeginForm("Test", "Home"))
{
    <div>Upper form</div>
    @Html.EditorForModel()
}

在EditorTemplates中，我有这个视图的编辑器

@model WebApplication2.Models.TestViewModel

@using (Html.BeginForm("Test2", "Home"))
{
    <h2>TestViewModel</h2>
}

实际结果是

<form action="/Home/Test" method="post">    
    <div>Upper form</div>
    <div class="editor-label"><label for="Age">Age</label></div>
    <div class="editor-field"><input class="text-box single-line" data-val="true" data-val-number="The field Age must be a number." data-val-required="The Age field is required." id="Age" name="Age" type="number" value="0"> <span class="field-validation-valid" data-valmsg-for="Age" data-valmsg-replace="true"></span></div>
    <div class="editor-label"><label for="Name">Name</label></div>
    <div class="editor-field"><input class="text-box single-line" id="Name" name="Name" type="text" value=""> <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span></div>
</form>

但愿望的结果应该是

<form action="/Home/Test" method="post">    
    <div>Upper form</div>
    <form action="/Home/Test2" method="post">  
        <div class="editor-label"><label for="Age">Age</label></div>
        <div class="editor-field"><input class="text-box single-line" data-val="true" data-val-number="The field Age must be a number." data-val-required="The Age field is required." id="Age" name="Age" type="number" value="0"> <span class="field-validation-valid" data-valmsg-for="Age" data-valmsg-replace="true"></span></div>
        <div class="editor-label"><label for="Name">Name</label></div>
        <div class="editor-field"><input class="text-box single-line" id="Name" name="Name" type="text" value=""> <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span></div>
    <form>
</form>

所以我的问题是如何才能正确嵌套第二个BeginForm？

Answer 1

正如评论中提到的那样，嵌套表格不是一个好主意。

您应该做的是，保持外部视图的表单标记不变。对于您的模型，使用没有表单标记的普通html表单元素并使用ajax从您的java脚本向服务器发布数据，一旦您收到数据，您应该能够使用jQuery访问DOM元素并根据需要更新值。

这样的事情（以下代码不适用于您提供的标记。这只是为了让您了解如何处理它）;

$(function(){

  $(document).on("click","#SomeBtnOnModelDialog",function(e){
    //Some submit button on model dialog was clicked
     e.preventDefault();

     //Read the data from model dialog elements using jquery 
     // and build an object to send to action method

     var dummyDataYouWantToSend = { name : "Read it using jquery",age:12};
     $.post("@Url.Action("SomeActionMethod","YourController")", dummyDataYouWantToSend ,
                                                       function (res){

      //Got some response. 
      //Now update some DOM elemets from the JSON response came back?
     // $("#SomeFormElementId").val(res.SomePropertyName);     
     });

  });

});

Html.BeginForm不适用于嵌套表单

1 个答案: