Razor Mvc 3+；Jquery自动完成问题

大家好

我试图用Razor mvc3编写一个简单的注册表，使用jquery自动完成从数据库中填写城市、州信息。razor视图使用表单验证，jquery填充文本框信息。然而，当从所述文本框向控制器传递数据时，该值始终为空

视图中的文本框：

<input data-autocomplete="@Url.Action("AutoCompleteCity", "Search")"  class="form-control" placeholder="Enter City" name="city" id="city" />  

控制器（registration.city始终为空）：

Jquery自动完成：

$("#city").
        autocomplete({
        source: function (request, response) {
            $.ajax({    
                url: serviceURL,
                type: "POST",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    $("#targetDiv").append($("<ul id='targetUL' class='list-group'></ul>"));
                    //Removing previously added li elements to the list.
                    $("#targetUL").find("li").empty();

                    $.each(data, function (i, value) {
                        //On click of li element we are calling a method.                        
                        $("#targetUL").append($("<li class='list-group-item' onclick='javascript:addText(this)'>" + value.city + ", " + value.state + "</li>"));
                    });
                }
            })
        },

而不是用这个

data-autocomplete="@Url.Action("AutoCompleteCity", "Search")"

尝试将元素包装到表单中，然后在表单中设置一个隐藏字段

<input type="hidden" value="" />

---

然后在JQuery中设置该值，并将其与其余字段一起提交

在进行了大量搜索之后，我想出了一个解决方案

视图：

@TextBoxFor（u=>u.city.city，新{@class=“form control”，@placeholder=“Enter Your city”}）
@Html.HiddenFor（u=>u.city.cityId）
@Html.HiddenFor（u=>u.city.state，新{Value=”“}）

使用razor语法在隐藏输入中传递我需要的ID（感谢@ben jones的建议）

我还利用

$（“城市”）。
自动完成({
来源：功能（请求、响应）{
$.ajax（{
url:serviceURL，
类型：“POST”，
数据类型：“json”，
async:false，
数据：{term:request.term}，
成功：功能（数据）{
$（“#targetDiv”）。追加（$（“
”）；
//删除以前添加到列表中的li元素。
$（“#targetUL”）.find（“li”）.empty（）；
$。每个（数据、函数（i、值）{
//单击li元素，我们将调用一个方法。
$（“#targetUL”）.append（$（“

data-autocomplete="@Url.Action("AutoCompleteCity", "Search")"

<input type="hidden" value="" />

 <div class="editor-field">

      @Html.TextBoxFor(u => u.city.city, new { @class="form-control", @placeholder="Enter Your City"})
      <div id="targetDiv">                                 
      </div>                                
     @Html.HiddenFor(u => u.city.cityId)
     @Html.HiddenFor(u => u.city.state, new { Value = "" })                                       
     <br />
 </div>

$("#city_city").
        autocomplete({
        source: function (request, response) {
            $.ajax({    
                url: serviceURL,
                type: "POST",
                dataType: "json",
                async: false,
                data: { term: request.term },
                success: function (data) {
                    $("#targetDiv").append($("<ul id='targetUL' class='list-group'></ul>"));
                    //Removing previously added li elements to the list.
                    $("#targetUL").find("li").empty();

                    $.each(data, function (i, value) {
                        //On click of li element we are calling a method.                        
                        $("#targetUL").append($("<li class='list-group-item' onclick='javascript:addText(this)' value='" + value.cityId+ "' data-city='" + value.city+ "' data-state='" + value.state+ "' >" + value.city+ ", " + value.state+ "</li>"));
                    });
                }
            })
        },
        minLength: 3,
        delay: 200,
        messages: {
            noResults: "", results: ""
        }
        }).keyup(function (e) {

            $("#targetUL").empty();

            $("#city_city").autocomplete().term = null;            
        });

});


function addText(e) {
    var text= e.innerText;   

    $("#city_city").removeClass("input-validation-error");
    //setting the value attribute of textbox with selected li element.
    $("#city_city").html(text);
    $("#city_city").val(text);

    $("#city_cityIdidLocalidad").val(e.value);
    $("#city_city").val(e.getAttribute("data-city"));
    $("#city_state").val(e.getAttribute("data-state"));


    //Removing the ul element once selected element is set to textbox.
    $("#targetUL").empty();
}