单页有三种不同的注册表单，基于单ID引用，我需要调用三种不同的[HttpPost] ActionResult方法，当我点击第一个表单的提交按钮时正确地转到第一个动作结果方法。
<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();
}
}
Ajax方法：
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);
}
});
}
答案 0 :(得分：1)
表单中的submit将发布表单，即使您已写入onclick操作。如果您希望它改为调用javascript函数，请将<input>更改为<button>或<a>代码。
修改
完全删除表单标记，以防止重新加载页面的提交。
答案 1 :(得分：1)
您的按钮仍在表单中。因此，当您在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代码时，从action方法返回完整视图也没有意义。也许你应该回复一个json回复。