在我看来有一些隐藏的字段
using (Html.BeginForm("AddAttendeeSuperOffice"))
{
@Html.HiddenFor(m => m.SelectedSuperOfficeEmail.FirstName, new { id = "SelectedSuperOfficeEmail_FirstName" })
@Html.HiddenFor(m => m.SelectedSuperOfficeEmail.LastName, new { id = "SelectedSuperOfficeEmail_LastName" })
@Html.HiddenFor(m=>m.SelectedSuperOfficeEmail.AppointmentId)
@Html.HiddenFor(m => m.SelectedSuperOfficeEmail.SuperOfficePersonId, new { id = "SelectedSuperOfficeEmail_SuperOfficePersonId" })
<div class="form-group">
@Html.LabelFor(m => m.SelectedSuperOfficeEmail.Email, new { @class = "col-md-2 control-label" })
<div class="col-md-8 input-group">
@Html.TextBoxFor(m => m.SelectedSuperOfficeEmail.Email, new { id = "SelectedSuperOfficeEmail", @class = "form-control", PlaceHolder = "Search in SuperOffice" }) <input type='submit' id="btnEmail" class="btn btn-default" value="Add>>" />
</div>
</div>
}
@section Scripts{
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/Scripts/jquery-ui-1.10.4.min.js")
<script type="text/javascript">
$(function() {
$("#SelectedSuperOfficeEmail").
autocomplete({
source: '/Appointment/SuperOfficePerson',
minLength: 1,
});
});
</script>
}
呼叫JQuery-UI的功能是
public JsonResult SuperOfficePerson(string term)
{
var persons = _connectionRepository.FindPersonsFromSuperOffice(term);
return Json(persons.Select(p => new { label = p.FirstName + " " + p.LastName, value = p.Email,p.FirstName,p.LastName,p.ExternalPersonId}), JsonRequestBehavior.AllowGet);
}
，当我检查吹牛的响应时，这就是我作为JSON响应值（只是一个示例）
[{"label":"test user","value":"test.user@hotmail.com","FirstName":"test","LastName":"user","ExternalPersonId":6}]
现在，jQuery或jQuery-UI中是否有一些可以将这些值绑定为对我的隐藏字段值的响应的值？
例如：
$('#SelectedSuperOfficeEmail_FirstName').val(json value Firstname);//something like that
$('#SelectedSuperOfficeEmail_LastName').val(json value Lastname);
这个问题与我昨天的问题相同。但是我认为这将使事情变得更加清晰，并有助于更好的答复。
edit1：根据@andrei V的答案 AJAX请求
在视图中
@section脚本{ @scripts.render（"〜/bundles/jqueryval"） @scripts.render（"〜/scripts/jquery-ui-1.10.4.4.min.js"）
<script type="text/javascript">
$(document).ready(function()
{
$.ajax({
url: '/Appointment/SuperOfficePerson',
type: 'GET',
success: function(data) {
//set your autocomplete
$("#SelectedSuperOfficeEmail").
autocomplete({
source: data,
minLength: 1,
});
//convert your data so you can (easily) access the properties
var obj = {};
obj = JSON.parse(data);
$('#SelectedSuperOfficeEmail_FirstName').val(obj.FirstName);
$('#SelectedSuperOfficeEmail_LastName').val(obj.LastName);
}
});
});
//$(function() {
// $("#SelectedSuperOfficeEmail").
// autocomplete({
// source: '/Appointment/SuperOfficePerson',
// minLength: 1,
// });
// $("#SelectedAddressBookPerson").autocomplete({
// source: '/Appointment/AddressBookPerson',
// minLength: 1,
// });
//});
</script>
}问题：在加载页面时，控制器中的JSONREQUEST方法会被击中，但是当我开始在文本框中键入时，该方法不会受到打击。在浏览器控制台
中Uncaught Error: Syntax error, unrecognized expression: div.col-md-offset-2>input>Previous" browserLink:37
bc.error browserLink:37
bh browserLink:37
bp browserLink:37
r.querySelectorAll.bp browserLink:37
bc browserLink:37
p.fn.extend.find browserLink:37
p.fn.p.init browserLink:37
p browserLink:37
addExtension.r browserLink:64
t.ajax.success browserLink:64
k browserLink:37
l.fireWith browserLink:37
y browserLink:37
d
更新2：我尝试的
@section Scripts{
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/Scripts/jquery-ui-1.10.4.min.js")
<script type="text/javascript">
$(document).ready(function() {
$("#SelectedSuperOfficeEmail").
autocomplete({
source: function(request, response) {
$.ajax({
url: '/Appointment/SuperOfficePerson',
type: 'GET',
dataType:"json",
data:{term:request.term},
success: function(data) {
//set your autocomplete
//$("#SelectedSuperOfficeEmail").
// autocomplete({
// source: data,
// minLength: 1,
// });
//convert your data so you can (easily) access the properties
var obj = {};
obj = JSON.parse(data);
$('#SelectedSuperOfficeEmail_FirstName').val(obj.FirstName);
$('#SelectedSuperOfficeEmail_LastName').val(obj.LastName);
}
});
}
});
});
但是现在，我看到了所有响应
只需做一个ajax调用：
$.ajax({
url: '/Appointment/SuperOfficePerson',
type: 'GET',
success: function (data){
//set your autocomplete
$("#SelectedSuperOfficeEmail").
autocomplete({
source: data,
minLength: 1,
});
//convert your data so you can (easily) access the properties
var obj = {};
obj = JSON.parse(data);
$('#SelectedSuperOfficeEmail_FirstName').val(obj.FirstName);
$('#SelectedSuperOfficeEmail_LastName').val(obj.LastName);
}
})
自动完成具有select函数，可以用来做某件事...当选择值时。
顺便说一句，根据您的MVC版本，您可以使用@Html.IdFor（可用于获取元素的ID：在重构的情况下更好）
so
<script type="text/javascript">
$(function() {
$("#SelectedSuperOfficeEmail").
autocomplete({
source: '/Appointment/SuperOfficePerson',
minLength: 1,
select:function(event, ui) {
$("#@Html.IdFor(m => m.SelectedSuperOfficeEmail.FirstName").val(ui.item.FirstName)
})
});
});
</script>
您可以将JSON序列化为对象并遍历它们？类似：
var myData = JSON.parse(jsonResult);
然后您可以做类似：
的事情$('#SelectedSuperOfficeEmail_FirstName').val(myData.Firstname);
（尚未尝试过代码，但应该关闭）