我是 mvc 和 jQuery 的新手，所以我不完全确定如何最好地表达这个问题以获得最佳响应。我看到许多帖子给了我一些我需要的东西，但我仍然无法将它们全部组合成一个可行的解决方案。
编辑 2013 年 9 月 18 日
我有一个 mvc4 应用程序，它有许多需要从数据库中查找人员记录的视图。我正在寻找的解决方案将在单击按钮时打开一个 jqueryui 对话框，该对话框将允许用户在 db 中搜索 person rec。我也有需要查找大量人员记录以填充模型的视图（即 CaseWorkerPersonID、ParentPersonID、ChildPersonID 等）。该对话框将有一个 jqueryui 自动完成小部件，当用户从自动完成列表中选择人员时，启动搜索对话框的视图需要引用所选人员记录。
干杯
编辑 好的，所以这是我尝试做的一个例子。
我有一个案例/详细信息...
@model CENSimple.Models.Case
@{
ViewBag.Title = "Details";
}
@section Scripts{
<script type="text/javascript">
//var linkObj;
$(function () {
$(".editLink").button(); //turn the editLink class links to buttons
$('#updateDialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true,
buttons: {
"Update": function () {
$(this).dialog("close");
//psuedo code
if(this update from "Add CW to case")
{
$('#SelectedPersonFromAddCWToCase').text('PersonID: ' + $('#selectedPersonID').val() + ' selected');
} else
{
$('#SelectedPersonFromAddPersonToCase').text('PersonID: ' + $('#selectedPersonID').val() + ' selected');
}
},
"Cancel": function () {
$(this).dialog("close");
$('#selectedPersonID2').text('Person search cancelled');
}
}
});
$(".editLink").click(function () {
//change the title of the dialog
var linkObj = $(this);
var dialogDiv = $('#updateDialog');
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data) {
dialogDiv.html(data);
dialogDiv.dialog('open');
});
return false;
});
});
</script>
}
@Html.ActionLink( "Add person to case", "_AddPersonToCase", new { SearchURL = "/Person/SearchPeople"}, new { @class = "editLink" })
@Html.ActionLink( "Add CW to case", "_AddCWToCase", new { SearchURL = "/Person/SearchPeople2"}, new { @class = "editLink" })
<div id="SelectedPersonFromAddPersonToCase"></div>
<div id="SelectedPersonFromAddCWToCase"></div>
<div id="updateDialog" title="Select Person"></div>
以及具有以下操作的案例控制器，这些操作返回 _PersonSearch 部分视图
public ActionResult _AddPersonToCase(Models.PersonSearch obj)
{
return PartialView("_PersonSearch", obj);
}
public ActionResult _AddCWToCase(Models.PersonSearch obj)
{
return PartialView("_PersonSearch", obj);
}
和具有以下操作的人员控制器，这些操作为我的 jquery 自动完成小部件返回 JSON 数据，如下所示
/// <summary>
/// Example Search action
/// </summary>
/// <param name="term">search term from jquery autocomplete</param>
/// <returns>value/label list of people matching search term
/// displaying firstname followed by surname
/// </returns>
public JsonResult SearchPeople(string term)
{
Repositories.PersonRepository repo = new Repositories.PersonRepository();
var results=repo.GetSearchResults(new Models.PersonSearchCriteria { Name = term });
var results1 = results
.OrderBy(s => s.FirstName)
.Select(s => new
{
label = s.FirstName + " " + s.LastName,
value = s.ID
});
JsonResult r = Json(results1, JsonRequestBehavior.AllowGet);
return r;
}
/// <summary>
/// Example Search action
/// </summary>
/// <param name="term">search term from jquery autocomplete</param>
/// <returns>value/label list of people matching search term
/// displaying surname followed by firstname
/// </returns>
public JsonResult SearchPeople2(string term)
{
Repositories.PersonRepository repo = new Repositories.PersonRepository();
var results = repo.GetSearchResults(new Models.PersonSearchCriteria { Name = term });
var results1 = results
.OrderBy(s => s.FirstName)
.Select(s => new
{
label = s.LastName + ", " + s.FirstName ,
value = s.ID
});
JsonResult r = Json(results1, JsonRequestBehavior.AllowGet);
return r;
}
最后是 _PersonSearch 部分视图，如下所示...
@model CENSimple.Models.PersonSearch
<script>
$(function () {
$("#Name").autocomplete({
source:'@Model.SearchURL',
minLength: 2,
select: function (event, ui) {
//Put the selected label into the input
//If this is not done then the value will be in input
this.value = ui.item.label;
$('#SelectedPersonID').val(ui.item.value);
event.preventDefault(); // Prevent the default focus behavior.
},
focus: function (event, ui) {
this.value = ui.item.label;
event.preventDefault(); // Prevent the default focus behavior.
return false;
}
});
});
</script>
<div class="ui-widget">
<label for="searchPerson">Name: </label>
@Html.EditorFor(m=>m.Name)
</div>
<div id="searchContext"></div>
@Html.EditorFor(m=>m.SelectedPersonID)
我需要的是能够在我的 /Case/Details 视图中的多个位置使用我的 _PersonSearch 部分视图
@Html.ActionLink( "Add person to case", "_AddPersonToCase", new { SearchURL = "/Person/SearchPeople"}, new { @class = "editLink" })
@Html.ActionLink( "Add CW to case", "_AddCWToCase", new { SearchURL = "/Person/SearchPeople2"}, new { @class = "editLink" })
并使局部视图的每个实例都能够配置为
- 使用我选择的案例操作
- 使用我选择的人员搜索操作
- 当我从部分视图的自动完成小部件中选择一个值并单击更新按钮时，更新我在主视图上选择的元素。
我发布的代码使我能够执行 1 和 2，但我坚持如何满足要求 3
即在单击对话框实例中的<div id="SelectedPersonFromAddPersonToCase"></div>更新按钮时填充，并在选择对话框实例中的更新按钮时填充"Add person to case"<div id="SelectedPersonFromAddCWToCase"></div>"Add CW to case"
感谢所有的建议。