2017-09-15 54 views
-1

在单页网页表单中我有多步骤注册表单当我最初点击第一个表单时,当我点击下一个按钮时,文本框出现,按钮的值转到javascript代码。所以如何在asp.net MVC中的下一个按钮函数上调用javascript。如何在视图中调用javascrpit函数以mvc形式?

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

按钮的Click事件代码

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

如何在接下来的按钮功能的JavaScript调用到asp.net MVC控制器

[HttpPost] 
     public ActionResult AddCompany(Company cmp) 
     { 

      try 
      { 

       if (ModelState.IsValid) 
       { 

       } 

       return View(); 
      } 

      catch 
      { 
       return View(); 
      } 

     } 
+0

可能的复制(https://stackoverflow.com/questions/:我们的代码,但是你可以通过简单地做这样的事情从JavaScript调用控制器46235066/javascript-function-from-asp-net-mvc-on-httppost-method) – Liam

+0

请不要多次提问相同的问题 – Liam

回答

0

老实说,我没有读完所有的东西

$.post("@Url.Action("Company","AddCompany")", 
    { 
     id : $(this).data("companyId") 
     /*More fields here...*/ 
    }, function(data) 
    { 
     alert(data); 
    } 
的[?从Asp.net MVC javascript函数上Httppost方法]
+0

请问您可以添加完整的代码吗? –

相关问题