Html.BeginForm FormMethod.Post提交按鈕點擊不起作用？

-1

單頁有三種不同的註冊表單，基於單個ID參考，我需要調用三種不同的[HttpPost]ActionResult方法，當我點擊第一個表單的提交按鈕時，它會正確轉到第一個操作結果方法。Html.BeginForm FormMethod.Post提交按鈕點擊不起作用？

<div class="page-content"> 
    <div class="container-fluid"> 
     <header class="section-header"> 
      <div class="tbl"> 
       <div class="tbl-row"> 
        <div class="tbl-cell"> 
         <h2>Company Registration Form</h2> 
        </div> 
       </div> 
      </div> 
     </header> 
     @using (Html.BeginForm(FormMethod.Post)) 
     { 
      @Html.AntiForgeryToken() 
      @Html.ValidationSummary(true) 
      <section class="tabs-section"> 
       <div class="tabs-section-nav tabs-section-nav-icons"> 
        <div class="tbl"> 
         <ul class="nav" role="tablist"> 
          <li class="nav-item"> 
           <a class="nav-link active" href="#tabs-1-tab-1" role="tab" data-toggle="tab"> 
            <span class="nav-link-in"> 
             <i class="font-icon font-icon-cogwheel"></i> 
             Company Registration Form 
            </span> 
           </a> 
          </li> 
          <li class="nav-item"> 
           <a class="nav-link" href="#tabs-1-tab-2" role="tab" data-toggle="tab"> 
            <span class="nav-link-in"> 
             <span class="glyphicon glyphicon-music"></span> 
             Company Social Network 
            </span> 
           </a> 
          </li> 
          <li class="nav-item"> 
           <a class="nav-link" href="#tabs-1-tab-3" role="tab" data-toggle="tab"> 
            <span class="nav-link-in"> 
             <i class="fa fa-product-hunt"></i> 
             Company Reference 
            </span> 
           </a> 
          </li> 
         </ul> 
        </div> 
       </div><!--.tabs-section-nav--> 
       <div class="tab-content"> 
        <div role="tabpanel" class="tab-pane fade in active show" id="tabs-1-tab-1"> 
         <br /> 
         <br /> 
         <section> 
          <div> 
           <div class="row"> 
            <div class="col-lg-4"> 
             <fieldset class="form-group"> 
              @Html.LabelFor(model =>Model.company.CompanyName, new { @class = "form-label semibold control-label" }) 
              @Html.TextBoxFor(model => model.company.CompanyName, new { @class = "form-control", placeholder = "Enter the Company Name" }) 
              @Html.ValidationMessageFor(model => model.company.CompanyName) 
             </fieldset> 
            </div> 
            <div class="col-lg-4"> 
             <fieldset class="form-group"> 
              @Html.LabelFor(model => model.company.ShortName, new { @class = "form-label semibold" }) 
              @Html.TextBoxFor(model => model.company.ShortName, new { @class = "form-control", placeholder = "Enter the Short Name" }) 
              @Html.ValidationMessageFor(model => model.company.ShortName) 
             </fieldset> 
            </div> 
            <div class="col-lg-4"> 
             <fieldset class="form-group"> 
              @Html.LabelFor(model => model.company.Division, new { @class = "form-label semibold" }) 
              @Html.TextBoxFor(model => model.company.Division, new { @class = "form-control", placeholder = "Enter the Division" }) 
              @Html.ValidationMessageFor(model => model.company.Division) 
             </fieldset> 
            </div> 
           </div><!--.row--> 
           <div class="row"> 
            <div class="col-lg-4"> 
             <fieldset class="form-group"> 
              @Html.LabelFor(model => model.company.Email, new { @class = "form-label semibold" }) 
              @Html.TextBoxFor(model => model.company.Email, new { @class = "form-control", placeholder = "Enter your Email" }) 
              @Html.ValidationMessageFor(model => model.company.Email) 
             </fieldset> 
            </div> 
           </div><!--.row--> 
          </div> 
         </section> 
         <input type="submit" name="Submit" id="Save" value="Save" class="btn btn-rounded btn-inline btn-success" onclick=" GetInfo();" /> 
        </div><!--.tab-pane--> 
        <div role="tabpanel" class="tab-pane fade" id="tabs-1-tab-2"> 
         <br /> 
         <section> 
          <div> 
           <div class="row"> 
            <div class="col-lg-4"> 
             <fieldset class="form-group"> 
              @Html.LabelFor(model => model.CompanySocial.FaceBookID, new { @class = "form-label semibold" }) 
              @Html.TextBoxFor(model => model.CompanySocial.FaceBookID, new { @class = "form-control", placeholder = "Enter the Facebook Link" }) 
             </fieldset> 
            </div> 
            <div class="col-lg-4"> 
             <fieldset class="form-group"> 
              @Html.LabelFor(model => model.CompanySocial.TwitterID, new { @class = "form-label semibold" }) 
              @Html.TextBoxFor(model => model.CompanySocial.TwitterID, new { @class = "form-control", placeholder = "Enter the Twitter Link" }) 
             </fieldset> 
            </div> 
            <div class="col-lg-4"> 
             <fieldset class="form-group"> 
              @Html.LabelFor(model => model.CompanySocial.linkedinID, new { @class = "form-label semibold" }) 
              @Html.TextBoxFor(model => model.CompanySocial.linkedinID, new { @class = "form-control", placeholder = "Enter the Linkedin Link" }) 
             </fieldset> 
            </div> 
           </div><!--.row--> 
          </div> 
         </section> 
         <input type="submit" name="Submit" value="Previous" class="btn btn-rounded btn-inline btn-primary prev-step" /> 
         <input type="submit" name="Submit" id="Save" value="Next" class="btn btn-rounded btn-inline btn-success" onclick="GetInfo1();" /> 
        </div><!--.tab-pane--> 
        <div role="tabpanel" class="tab-pane fade" id="tabs-1-tab-3"> 
         Tab 3 
         <br /><br /> 
         <input type="submit" name="Submit" value="Previous" class="btn btn-rounded btn-inline btn-primary prev-step" /> 
         <input type="submit" name="Submit" value="Finish" class="btn btn-rounded btn-inline btn-success" /> 
        </div><!--.tab-pane--> 
       </div><!--.tab-content--> 
      </section><!--.tabs-section--> 
     } 
    </div> 
</div>

的ActionResult代碼：

[HttpPost] 
     public ActionResult AddCompany(MainModel cmp) 
     { 

      try 
      { 

       if (ModelState.IsValid) 
       { 

       } 

       return View(); 
      } 

      catch 
      { 
       return View(); 
      } 

     }

當我點擊第二個提交按鈕，它再次將同一ActionResult AddCompany(MainModel cmp)，但我需要去ActionResult AddSocial(MainModel Social)

下面這段代碼：

[HttpPost] 
     public ActionResult AddSocial(MainModel Social) 
     { 
      try 
      { 

       if (ModelState.IsValid) 
       { 
        //ScriptManager.RegisterStartupScript(this, typeof(Page), "paginationClickHandler", "paginationClickHandler();", true); 
       } 

       return View(); 
      } 

      catch 
      { 
       return View(); 
      } 
     }

阿賈克斯方法：

function GetInfo() { 
      var company = { companyName: document.getElementById('CompanyName').value, shortName: document.getElementById('ShortName').value, division: document.getElementById('Division').value, Email: document.getElementById('Email').value } 
      $.ajax({ 
       type: "POST", 
       url: "/Company/AddCompany", 
       data: '{cmp:' + JSON.stringify(company) + '}', 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: OnSuccess, 
       failure: function (response) { 
        alert(response.d); 
       } 
      }); 
     } 
     function OnSuccess(response) { 
      alert(response.d); 
     } 

     function GetInfo1() { 
      var Social = { faceBook: document.getElementById('FaceBook').value, twitter: document.getElementById('Twitter').value, linkedin: document.getElementById('linkedin').value } 
      $.ajax({ 
       type: "POST", 
       url: "/Company/AddSocial", 
       data: '{Social:' + JSON.stringify(Social) + '}', 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: OnSuccess, 
       failure: function (response) { 
        alert(response.d); 
       } 
      }); 
     }

來源

2017-09-16 Ivin Raj

A submit裏面的表格即將發佈表格，即使您有一個onclick行動書面。如果您希望它調用javascript函數，請將<input>更改爲<button>或<a>標記。

編輯

完全刪除表單標籤，以防止其提交重新加載頁面。

來源

2017-09-16 16:23:43 Tim

如果我使用按鈕標籤意味着數據傳輸到動作結果類還是不？個人表格數據是否會轉移？ –

您設置它的方式，即使沒有表單，也應該傳遞所有數據。該表單無關緊要，因爲您在ajax調用之前正在將所有字段收集在JavaScript中。 – Tim

謝謝..當我點擊第一個按鈕頁面刷新，所以下一個選項卡不啓用如何解決此..請任何想法 –

您的按鈕仍在窗體中。所以，當你處理你的按鈕在javascript中點擊時，你需要確保阻止表單內部的提交按鈕的默認行爲（表單提交）。

使用非侵入式JavaScript的方式，給出一個唯一的ID，以您的按鈕

<input type="submit" id="saveSocial" value="Next" />

而現在，綁定click事件上的這個按鈕，使用jQuery的方法preventDefault防止默認行爲，並打電話給你的JS方法。

$(document).ready(function() { 
    $("#saveSocial").click(function(e) { 
     e.preventDefault(); 
     GetInfo1(); 
    }); 
});

此外，當調用來自ajax代碼時，從您的操作方法返回完整視圖沒有任何意義。可能是你應該返回一個JSON響應。

來源

2017-09-16 16:59:31 Shyju

在我的第一個按鈕點擊頁面刷新..如何停止和啓用第二次點擊？任何想法.. –

與上述代碼我張貼在答案，如果你沒有任何其他腳本錯誤的頁面，它不會刷新頁面，因爲你正在做一個AJAX帖子。 – Shyju

也許你應該對第一個按鈕做同樣的事情，當ajax調用成功時，啓用/顯示第二個選項卡。 – Shyju

Html.BeginForm FormMethod.Post提交按鈕點擊不起作用？

回答

相關問題