Question

我有一个KendoUI搜索栏，根据我输入的内容自动填充项目。当我输入时，我会得到一个下拉菜单。当我点击下拉列表中的某个项目时，我希望发生两件事。一个有效，即加载局部视图。但是，另一件事涉及更新同样在该局部视图中的div元素。

部分视图

@{
    ViewBag.Title = "Client";
}
    <div id="update">@ViewBag.name</div>
<p id="ahhh"></p>

外部Javascript功能

function onSelect(e) {
    $("#navResult").load('/Home/Client');
    var value = e.item.text();
    alert(value);

    $.ajax({
        type: "POST",
        url: "Home/someStuf",
        dataType: "json",
        data: {n: value },
        success: function (result) {
            alert("IT WORKED");
        },
        error: function (result) {
            alert("FAILED");
        }
    })
}

在HomeController中有一个名为someStuf的方法。我将点击事件的项目发送到someStuf方法。

现在，我正在使用两种控制器方法。

Secretary s = new Secretary();
public ActionResult Client()
{
    ViewBag.name = s.Client;
    return PartialView();
}

[HttpPost]
public JsonResult someStuf(String n)
{
    s.Client = n;
    return Json(n, JsonRequestBehavior.AllowGet);
}

然后，我使用从javascript传递的值更新一个类。然后，我将该新值添加到部分视图Client的viewbag中。

对于误导性变量感到抱歉。客户端是一种模型。然后我总是有一个叫做客户端的局部视图。

当我试试这个。 ViewBag没有显示我想要的结果。我可以让客户端发送到服务器。但我无法让服务器发送给客户......我敢打赌它很简单。但是我试图理解这一步，所以我可以使用相同的方法来更新id和class元素。

 <p class="CompanySearchBar">
                @(Html.Kendo().AutoComplete()
.Name("companyComplete") //The name of the AutoComplete is mandatory. It specifies the "id" attribute of the widget.
.DataTextField("company") //Specify which property of the Product to be used by the AutoComplete.
.BindTo(Model)
.Filter("contains")
.Placeholder("Company name")
.Events(e => { e.Select("onSelect"); })
                 )
            </p>

以上代码允许使用自动填充的搜索栏。在为项目键入时，下拉列表会显示具有相同子字符串的结果。单击其中一个结果时，将激活onSelect方法。

Answer 1

您可以这样给出，并且在发生更改事件时，只需使用jQuery

来分配一个值

function onSelect(e) {
    $("#navResult").load('/Home/Client');
    var value = e.item.text();
    alert(value);

    $.ajax({
        type: "POST",
        url: "Home/someStuf",
        dataType: "json",
        data: {n: value },
        success: function (result) {
            $('#ahhh').text(result.NAME); //the object which you returns from the controller
        },
        error: function (result) {
            alert("FAILED");
        }
    })
}

<label id=ahhh></label>

基于KendoUI小部件

1 个答案: