Html.BeginForm不适用于嵌套窗体

本文关键字：嵌套 窗体 适用于 不适用 BeginForm Html | 更新日期: 2023-09-27 18:24:53

View1

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

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

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

Html.BeginForm不适用于嵌套窗体

正如评论中提到的，嵌套形式不是一个好主意。

你应该做的是，保持外部视图的表单标记。对于你的模型，使用没有表单标记的普通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);     
     });
  });
});
相关文章：