输入按钮的值应该在点击事件后用jquery改变

Question

我尝试在点击输入按钮后更改其值。按钮本身是一个提交按钮，控制器通过RedirectToAction返回到页面。我的问题是，我可以改变按钮的值，但是这个新值只显示了一毫秒，然后它被设置回原来的值。脚本触发后页面是否重新加载?或者为什么按钮值在脚本触发后设置回来?

下面是我的代码:按钮:

@using (Html.BeginForm("StartNewM2OLIEProcess", "Patient", new { label = Model.PatientID }, FormMethod.Post))
{
<input type="submit" id="btnStartProcess" value="M²OLIE Prozess starten" class="btn btn-primary" />
}

脚本

@section Scripts{
<script type="text/javascript">

$("#btnStartProcess").on('click', function () {
var self = $(this);
var errorMsg = '@errorMsg';
if (errorMsg == '') {
//self.attr('M2OLIE Prozess starten', 'Prozess gestartet');
self.val('Prozess läuft...');
}
else {
self.val("M²OLIE Prozess starten");
}
});
</script>
<script type="text/javascript">
var message = '@message';
if(message){
alert(message);
}
</script>
}

因此脚本被正确触发，我可以用调试器进行测试。在调试期间，我还可以看到按钮的值在变化，但是一旦脚本结束，该值就会变回Html表单中定义的值。这里发生了什么?

Answer 1

当第一次点击时，执行jQuery事件，然后将页面发送给操作。你要么发布页面，要么管理点击事件。

用脚本

测试这段代码

$("form").submit(function (e) {
e.preventDefault(); 
});

我将给你一个例子来看看表单发布后的变化。

在控制器

[HttpGet]
public ActionResult StartNewM2OLIEProcess()
{
return View();
}
[HttpPost]
public ActionResult StartNewM2OLIEProcess(string myText)
{
ViewBag.ButtonText = myText;
return View();
}

在

@{
ViewBag.Title = "Test";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@using (Html.BeginForm("StartNewM2OLIEProcess", "Home", FormMethod.Post))
{
string buttonValue = "M²OLIE Prozess starten";
if (!string.IsNullOrEmpty(ViewBag.ButtonText))
{
buttonValue = ViewBag.ButtonText;
}
<input type="text" id="myText" name="myText" />
<input type="submit" id="btnStartProcess" value="@buttonValue" class="btn btn-primary" />
}
<div id="myDiv" style="width:300px;height:50px;background:#FF5511;color:white;text-align:center;font-weight:bold;"></div>
@section scripts{
<script>
var result = '@(ViewBag.ButtonText)';
if (result != null) {
document.getElementById("myDiv").innerText = result;
}
</script>    
}