Question

我是mvc和jQuery的新手所以我不能完全确定如何最好地表达这个问题以获得最佳答案。我看到一些帖子给了我一些我需要的东西，但是我仍然无法将它们整合到一个有效的解决方案中。

编辑2013年9月18日

我有一个mvc4应用程序，它有许多需要从db查找人员记录的视图。我正在寻找的是一个解决方案，它将点击按钮打开一个jqueryui对话框，允许用户搜索db for 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>

和一个Case Controller，其中包含以下操作，返回_PersonSearch局部视图

public ActionResult _AddPersonToCase(Models.PersonSearch obj)
{
    return PartialView("_PersonSearch", obj);
}
public ActionResult _AddCWToCase(Models.PersonSearch obj)
{
    return PartialView("_PersonSearch", obj);
}

以及具有以下操作的Person Controller，它返回我的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" })

并将部分视图的每个实例都配置为

使用我选择的Case操作
使用我选择的人物搜索操作
在主视图上更新我选择的元素。

我发布的代码让我有能力做1和2，但我坚持如何满足要求3

即当点击<div id="SelectedPersonFromAddPersonToCase"></div>对话框实例中的更新按钮时填充"Add person to case"，并且当选择<div id="SelectedPersonFromAddCWToCase"></div>对话框实例中的更新按钮时"Add CW to case"

感谢所有建议。

Answer 1

为了接收您要查找的内容，您在服务器上获取该人员记录的请求需要添加更多数据库查询，以便检索您想要的字段以及该人的姓名。

首先要考虑的事情。如果您想在自动完成下拉结果中获得此额外信息，请确保服务器可以同时处理这么多请求。如果您只是想在选择人员后使用数据，请添加一些内容以对点击事件采取行动。在第二个SELECT查询和第二个AJAX请求之间，我不确定哪个性能更难，抱歉。

库应该有一个事件处理程序或至少一个结果列表的选择器，您可以根据所选记录启动操作（例如 - 选择某人时下载其余的详细信息）。 / p>

JSON将向页面提供详细信息，您将获取这些结果并根据需要显示它们。

如果没有实际的代码，我不能在这里得到更具体的内容，但我希望这有助于一些。

将数据从部分视图中的jquery对话框传递到主视图

1 个答案: