Question

我在这里学到了一些好东西here

我想知道一旦模型转换后可以从页面上的字段加载这些不同的JS模型值而不必使用

 model.ProductId = $("@txtProductId").val();

我的意思是，这可能是一个愚蠢的问题，有没有办法直接在JS字段中输入数据？像@Html.TextBoxFor一样为JS变量加载控制器模型字段？

我的产品形式有点像这样：

 @model ProductModel
 <form id="productForm">
   <table>
     <tr>
       <td>@Html.TextBoxFor(o => o.BrandName, new {@id=txtBrandName})
      ///etc

Answer 1

你有一个选择是使用像AngularJS这样的javascript MVC框架，然后这会自动发生（或多或少）。您可能希望使用纯HTML而不是@Html.TextBoxFor来创建文本输入。

例如，如果您使用AngularJS，您的视图将如下所示：

<input type="text" ng-model="model.ProductId" />

这会在文本框值和model.ProductId之间创建双向数据绑定。这意味着，只要用户在文本框中键入值，model.ProductId将自动设置为新值。此外，只要您在javascript中设置model.ProductId，您的文本框就会自动更新。

注意，如果您在视图中使用@for循环有任何重复部分，您可能希望将它们转换为ng-repeat部分（至少对于AngularJS）。

Answer 2

我在Stephen Muecke的帮助下找到了最好的方法。我所做的是在主页面中我有几个DIV：

 <div id="divPerson" style="display: none"></div>
 <div id="divProduct" style="display: none"></div>

在JavaScript代码中，我使用局部视图加载每个DIV：

 function loadPerson() {
   $.ajax({
      type: 'POST',
      url: '@Url.Action("LoadPerson"),
      success: function(data) {
         $("#divPerson").html(data);
         $("#divPerson").show();
      }
   });

控制器方法：

 public ActionResult LoadPerson()
 {
     var model = new PersonModel();
     return PartialView("PersonPage", model);
 }

在PersonPage中：

 $(document).ready(function() {
     $.validator.unobtrusice.parse();
 });

此页面中的每个字段都有一个＆＃39; personForm＆＃39;。

这是在页面加载后再次读取验证标签，以便在主页面中点击下一步：

 function goNext() {
   if (!$("#form1").valid()) {
       return false;
   }
   $.ajax({
      type: 'POST',
      url: '@Url.Action("AddPerson),
      data: $(".personForm").serializeArray(),
      success: function(data) {
          $("#divProduct").html(data);
          $("#divProduct").show();
          $("#divPerson").hide();
      }
   });

我通过设置某个类并将这些控件序列化以发送到控制器来为产品页面做同样的事情。

对我来说，这是一个很好的平衡，使用MVC和jQuery使页面流畅，清晰，干净，并增强用户体验。

从页面上的字段加载JavaScript模型

2 个答案: