how to pass @model.ApplicationId from html form to js

Question

I am trying to make an auto save function that will save the form data. I am unable to pass my ApplicationId in from form to JS in order to auto save. Though with the fixed id, auto saving does work. I have the following code:

Js Code:

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 CODE:

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

Basically, I want the @Model.ApplicationId to be passed to my Js, so that I can use that in my Autosaving function.

Answer 1

First off, your interval is wrong. What you are doing is calling a function and passing the result to the interval. You need to pass it a function that it can then call when needed. You are calling your function right away.

Next, all you need to do, is to use jQueries attr() method like so:

 let id = 'application-form' window.setInterval(() => AutoSaveDraft(id), 5000); function AutoSaveDraft(id) { let name = $(`#${id}`).attr('name') console.log(name) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form asp-action="Edit" id="application-form" name="@Model.ApplicationId"> </form> 

Answer 2

Let's say you have your JS on the same page as your html, you could simply write:

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

Now let's say your JS is somewhere else:

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

That's said, I would suggest you to use data- attribute to pass that kind of data. Let's try with 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);