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

Question

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

我想知道是否可以在转换模型后从页面上的字段加载这些不同的 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

您的一个选择是使用 javascript MVC 框架，例如 AngularJS，然后这将（或多或少）自动为您发生。您可能希望使用纯 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 的大力帮助下，我找到了执行此操作的最佳方法。我所做的是在主页上我有几个 DIVs:

 <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();
 });

并且此页面中的每个字段都有 class 个 'personForm'。

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

 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();
      }
   });

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

对我来说，这是使用 MVC 和 jQuery 之间的良好平衡，可以使页面流畅、清晰、干净，并增强用户体验。

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

Load JavaScript model from fields on page

javascript

asp.net-mvc

jquery