Comment appeler la fonction javascrpit en forme mvc dans la vue?

Question

Dans un formulaire web d'une seule page J'ai un formulaire d'inscription en plusieurs étapes Lorsque je clique initialement sur le premier formulaire, la boîte de texte apparaît lorsque je clique sur le bouton suivant la valeur du bouton va au code javascript. Alors, comment appeler le javascript sur la fonction du bouton suivant dans le MVC asp.net.

<section class="box-typical box-panel mb-4"> 
      <header class="box-typical-header"> 
       <div class="tbl-row"> 
        <div class="tbl-cell tbl-cell-title"> 
         <h3>Company Registration Form</h3> 
        </div> 
       </div> 
      </header> 
      <div class="box-typical-body"> 
       @using (Html.BeginForm("AddCompany", "Company", FormMethod.Post, htmlAttributes: new { id = "example-form", @class = "form-wizard" })) 
       { 
        @Html.AntiForgeryToken() 
        @Html.ValidationSummary(true) 
        <div> 
         <h3>Company Registration</h3> 
         <section> 
          <div class="row"> 
           <div class="col-lg-4"> 
            <fieldset class="form-group"> 
             @Html.LabelFor(model => model.CompanyName, new { @class = "form-label semibold" }) 
             @Html.TextBoxFor(model => model.CompanyName, new { @class = "form-control", placeholder = "Enter the Company Name" }) 
             @Html.ValidationMessageFor(model => model.CompanyName) 
            </fieldset> 
           </div> 
           <div class="col-lg-4"> 
            <fieldset class="form-group"> 
             @Html.LabelFor(model => model.ShortName, new { @class = "form-label semibold" }) 
             @Html.TextBoxFor(model => model.ShortName, new { @class = "form-control", placeholder = "Enter the Short Name" }) 
             @Html.ValidationMessageFor(model => model.ShortName) 
            </fieldset> 
           </div> 
           <div class="col-lg-4"> 
            <fieldset class="form-group"> 
             @Html.LabelFor(model => model.Division, new { @class = "form-label semibold" }) 
             @Html.TextBoxFor(model => model.Division, new { @class = "form-control", placeholder = "Enter the Division" }) 
             @Html.ValidationMessageFor(model => model.Division) 
            </fieldset> 
           </div> 
          </div><!--.row--> 
          <div class="row"> 
           <div class="col-lg-4"> 
            <fieldset class="form-group"> 
             @Html.LabelFor(model => model.Email, new { @class = "form-label semibold" }) 
             @Html.TextBoxFor(model => model.Email, new { @class = "form-control", placeholder = "Enter your Email" }) 
             @Html.ValidationMessageFor(model => model.Email) 
            </fieldset> 
           </div> 
           <div class="col-lg-4"> 
            <fieldset class="form-group"> 
             @Html.LabelFor(model => model.ShortName, new { @class = "form-label semibold" }) 
             @Html.TextBoxFor(model => model.ShortName, new { @class = "form-control", placeholder = "Enter the Short Name" }) 
             @Html.ValidationMessageFor(model => model.ShortName) 
            </fieldset> 
           </div> 
           <div class="col-lg-4"> 
            <fieldset class="form-group"> 
             @Html.LabelFor(model => model.Division, new { @class = "form-label semibold" }) 
             @Html.TextBoxFor(model => model.Division, new { @class = "form-control", placeholder = "Enter the Division" }) 
             @Html.ValidationMessageFor(model => model.Division) 
            </fieldset> 
           </div> 
          </div><!--.row--> 
         </section> 

         <h3>Company Reference</h3> 
         <section> 
          <div class="form-group"> 
           <label for="exampleInputEmail1">Address</label> 
           <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter text" required> 
           <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> 
          </div> 
         </section> 
         @*<h3>Company Social Network</h3> 
          <section> 
           <ul> 
            <li>Foo</li> 
            <li>Bar</li> 
            <li>Foobar</li> 
           </ul> 
          </section*@> 
         <h3>Company Social Network</h3> 
         <section> 
          <div class="form-group"> 
           <div class="checkbox"> 
            <input type="checkbox" id="agree" class="required" required> 
            <label for="agree">Terms and Conditions</label> 
           </div> 
          </div> 
         </section> 
        </div> 
       } 

      </div> 

     </section> 

JavaScript

<script> 
     $(function() { 
      $("#example-basic ").steps({ 
       headerTag: "h3", 
       bodyTag: "section", 
       transitionEffect: "slideLeft", 
       autoFocus: true 
      }); 

      var form = $("#example-form"); 
      form.validate({ 
       rules: { 
        agree: { 
         required: true 
        } 
       }, 
       errorPlacement: function errorPlacement(error, element) { element.closest('.form-group').find('.form-control').after(error); }, 
       highlight: function (element) { 
        $(element).closest('.form-group').addClass('has-error'); 
       }, 
       unhighlight: function (element) { 
        $(element).closest('.form-group').removeClass('has-error'); 
       } 
      }); 

      form.children("div").steps({ 
       headerTag: "h3", 
       bodyTag: "section", 
       transitionEffect: "slideLeft", 
       onStepChanging: function (event, currentIndex, newIndex) { 
        form.validate().settings.ignore = ":disabled,:hidden"; 
        return form.valid(); 
       }, 
       onFinishing: function (event, currentIndex) { 
        form.validate().settings.ignore = ":disabled"; 
        return form.valid(); 
       }, 
       onFinished: function (event, currentIndex) { 
        alert("Submitted!"); 
       } 
      }); 

      $("#example-tabs").steps({ 
       headerTag: "h3", 
       bodyTag: "section", 
       transitionEffect: "slideLeft", 
       enableFinishButton: false, 
       enablePagination: false, 
       enableAllSteps: true, 
       titleTemplate: "#title#", 
       cssClass: "tabcontrol" 
      }); 
     }); 
    </script> 

cliquez sur le bouton Code événement

function paginationClickHandler(event) 
{ 
    event.preventDefault(); 

    var anchor = $(this), 
     wizard = anchor.parent().parent().parent().parent(), 
     options = getOptions(wizard), 
     state = getState(wizard), 
     href = anchor.attr("href"); 

    switch (href.substring(href.lastIndexOf("#") + 1)) 
    { 
     case "cancel": 
      cancel(wizard); 
      break; 

     case "finish": 
      finishStep(wizard, state); 
      break; 

     case "next": 
      goToNextStep(wizard, options, state); 
      break; 

     case "previous": 
      goToPreviousStep(wizard, options, state); 
      break; 
    } 
} 

comment appeler le javascript sur la fonction suivante du bouton dans le contrôleur asp.net de MVC

[HttpPost] 
     public ActionResult AddCompany(Company cmp) 
     { 

      try 
      { 

       if (ModelState.IsValid) 
       { 

       } 

       return View(); 
      } 

      catch 
      { 
       return View(); 
      } 

     } 

Answer 1

Honnêtement, je n'ai pas tout lu notre code, mais vous pouvez appeler un contrôleur à partir de JavaScript en faisant simplement quelque chose comme:

$.post("@Url.Action("Company","AddCompany")", 
    { 
     id : $(this).data("companyId") 
     /*More fields here...*/ 
    }, function(data) 
    { 
     alert(data); 
    }