javascript - 如何将@model.ApplicationId从html表单传递到js

Question

我正在尝试创建一个自动保存功能来保存表单数据。我无法将我的 ApplicationId 从表单传递到 JS 以便自动保存。虽然使用固定 ID，但自动保存确实有效。我有以下代码:

JS代码:

window.setInterval(AutoSaveDraft(id), 50000);



function AutoSaveDraft(id) {  
   $.post({
         url: "/Application/Edit/"+id ,
         data: $("#application-form").serialize()
         }).done(function(data, textStatus, jqXhr) {
      if (jqXhr.status === 200) {
          alert("Data Application has been saved");        
          return true;
       }
    });
}

HTML 代码:

<form asp-action="Edit" id="application-form" name="@Model.ApplicationId" >
...
</form>

基本上，我希望将 @Model.ApplicationId 传递给我的 Js，以便我可以在自动保存功能中使用它。

Answer 1

假设您的 JS 与 html 位于同一页面上，您可以简单地编写:

window.setInterval(function () {
   var id = '@Model.ApplicationId'; // Turned C# to JS here
   AutoSaveDraft(id);
}, 50000);

function AutoSaveDraft(id) {  
   $.post({
      url: "/Application/Edit/"+id ,
      data: $("#application-form").serialize()
   }).done(function(data, textStatus, jqXhr) {
      if (jqXhr.status === 200) {
          alert("Data Application has been saved");        
          return true;
       }
   });
}

现在假设你的 JS 在其他地方:

HTML:

<form asp-action="Edit" id="application-form" name="@Model.ApplicationId" >
...
</form>

JS:

window.setInterval(function () {
   var id = $("#application-form").attr('name'); // Retrieve the ID
   AutoSaveDraft(id);
}, 50000);

function AutoSaveDraft(id) {  
   $.post({
      url: "/Application/Edit/"+id ,
      data: $("#application-form").serialize()
   }).done(function(data, textStatus, jqXhr) {
      if (jqXhr.status === 200) {
          alert("Data Application has been saved");        
          return true;
       }
   });
}

也就是说，我建议您使用 data- 属性来传递此类数据。让我们尝试一下data-application-id。

<form asp-action="Edit" id="application-form" data-application-id="@Model.ApplicationId">
...
</form>

window.setInterval(function () {
   var id = $("#application-form").data("application-id"); // Retrieve here
   AutoSaveDraft(id);
}, 50000);