ASP.NET MVC 4 验证后自定义 jQuery 脚本无法正常工作
Posted
技术标签:
【中文标题】ASP.NET MVC 4 验证后自定义 jQuery 脚本无法正常工作【英文标题】：Custom jQuery script not working correctly after ASP.NET MVC 4 validation 【发布时间】：2013-05-05 05:32:51 【问题描述】：我正在使用 jQuery 来启用和禁用两个单独的文本框输入及其标签，基于 Dropbox (#Drop1) 中的选择。这是我的 jQuery 脚本：
$(function ()
$("#Drop1").change(function ()
if ($(this).val() == "IWR")
ShowOther()
else
ShowIWR()
);
);
$(function ()
$("#Drop1").ready(function ()
if ($(this).val() == "IWR")
ShowOther()
else
ShowIWR()
);
);
function ShowOther()
$("#Job").attr("disabled", "disabled").css( "background-color": "#999", "display": "none" );
$("#job_row").css( "display": "none" );
$("#Project").removeAttr("disabled").css( "background-color": "#EFF8FB", "display": "block" );
$("#proj_row").css( "display": "block" );
function ShowIWR()
$("#Job").removeAttr("disabled").css( "background-color": "#EFF8FB", "display": "block" );
$("#job_row").css( "display": "block" );
$("#Project").attr("disabled", "disabled").css( "background-color": "#999", "display": "none" );
$("#proj_row").css( "display": "none" );
在页面加载时，一切都按预期工作。当我更改 Dropbox 时，正确的文本框及其输入会像我预期的那样显示和隐藏。查看我的代码，您可以看到 ID #Job 和 #job_row 应该是可见的，而 #Project 和 #proj_row 是隐藏的，反之亦然。当页面使用 GET() 加载时，与作业相关的标签和文本框是可见的。
我遇到的问题是在我选择显示#Project 和#proj_row (Drop1.val = "IWR") 的下拉列表后，如果验证器捕获的页面上出现错误，则页面不会重新加载正确起来。 #Job 和 #job_row 是可见的，即使重新加载 Drop1.val 仍然 = 到 "IWR"。
如果有帮助，这是我的控制器代码：
[HttpPost]
public ActionResult Create(QCLog qclog)
if (qclog.Job == null)
if (qclog.Type != "IWR")
ModelState.AddModelError("Job", "Job is required unless it is an IWR.");
else
if (qclog.Project == null)
ModelState.AddModelError("Project", "Project is required for IWRs.");
if (ModelState.IsValid)
if (qclog.Job != "IWR")
string[] qcjob = qclog.Job.Split('-');
int temp = Convert.ToInt32(qcjob[0]);
try
var job = jobdb.Server5_Job.Single(j => j.Job == temp);
qclog.Project = job.ProjectID;
qclog.Blend = job.BlendLot;
catch (Exception ex)
qclog.Project = null;
qclog.Blend = null;
else
qclog.Project = null;
qclog.Blend = null;
qclog.Timestamp = DateTime.Now;
qclog.Status = "Incomplete";
db.QCLogs.AddObject(qclog);
db.SaveChanges();
//PrintLabel(qclog);
return RedirectToAction("Index");
return View(qclog);
这是页面的视图源，经过错误验证：
<tr class="transparent">
<td class="transparent"><select id="Drop1" name="Type"><option value="FPI">FPI</option>
<option selected="selected" value="IWR">IWR</option>
<option value="Final">Final</option>
<option value="SMS">SMS</option>
<option value="Incoming">Incoming</option>
<option value="GageRR">Gage R+R</option>
<option value="Other">Other</option>
</select>
</td>
<td class="transparent"><span class="field-validation-valid" data-valmsg-for="Type" data-valmsg-replace="true"></span>
</td>
</tr>
<tr class="transparent">
<td class="transparent">
Operation
</td>
<td class="transparent">
</td>
</tr>
<tr class="transparent">
<td class="transparent"><input class="text-box single-line" data-val="true" data-val-length="Operation field cannot contain more than 3 characters." data-val-length-max="3" data-val-required="Operation required." id="Operation" name="Operation" type="text" value="020" />
</td>
<td class="transparent"><span class="field-validation-valid" data-valmsg-for="Operation" data-valmsg-replace="true"></span>
</td>
</tr>
<tr id="proj_row" class="transparent">
<td class="transparent">
Project (ex. 0730A)
</td>
<td class="transparent">
</td>
</tr>
<tr class="transparent">
<td class="transparent"><input class="input-validation-error text-box single-line" id="Project" name="Project" type="text" value="" />
</td>
<td class="transparent"><span class="field-validation-error" data-valmsg-for="Project" data-valmsg-replace="true">Project is required for IWRs.</span>
</td>
</tr>
<tr id="job_row" class="transparent">
<td class="transparent">
Job Number (ex. 12345-1)
</td>
<td class="transparent">
</td>
</tr>
<tr class="transparent">
<td class="transparent"><input class="text-box single-line" data-val="true" data-val-length="Job field cannot contain more than 10 characters." data-val-length-max="10" id="Job" name="Job" type="text" value="" />
</td>
<td class="transparent"><span class="field-validation-valid" data-valmsg-for="Job" data-valmsg-replace="true"></span>
</td>
</tr>
如果我的代码没有达到应有的效率，我提前道歉。我是一名后端人员，仍在了解前端框架。
感谢您的帮助。
【问题讨论】：
【参考方案1】：我想通了。而不是使用：
$(function ()
$("#Drop1").ready(function ()
if ($(this).val() == "IWR")
ShowOther()
else
ShowIWR()
);
);
我必须使用文档准备功能，如下所示：
$(document).ready(function ()
if ($("#Drop1").val() == "IWR")
ShowOther()
else
ShowIWR()
);
这样就达到了我想要的效果。我只能假设“#Drop1”的值在控件准备好时没有设置，而是在文档准备好后设置的。
【讨论】：
欢迎来到 SO 并祝贺您解决了自己的问题。从我这边 +1。以上是关于ASP.NET MVC 4 验证后自定义 jQuery 脚本无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章