jquery autocomplete和mvc

时间:2013-10-09 16:08:49

标签: javascript jquery asp.net-mvc asp.net-mvc-3

在我的局部视图中,我有名字,姓氏和用户名字段

<tr>
    <td>
        <b>Last Name</b><span class="red">*</span>
    </td>
    <td>
        @Html.TextBoxFor(model => model.LastName, new { id = "txtLastName" })
        @Html.ValidationMessageFor(model => model.LastName)
    </td>
</tr>
<tr>
    <td>
        <b>First Name</b><span class="red">*</span>
    </td>
    <td>
        @Html.TextBoxFor(model => model.FirstName, new { id = "txtFirstName" })
        @Html.ValidationMessageFor(model => model.FirstName)
    </td>
</tr>
<tr>
    <td>
        <b>User Name</b><span class="red">*</span>
    </td>
    <td>
        @Html.TextBoxFor(model => model.UserName, new { id = "txtUserNameAdd" })
        @Html.ValidationMessageFor(model => model.UserName)
    </td>
</tr>

现在我在用户名

上有自动填充功能
   $('#txtUserNameAdd').autocomplete({
        source: '/AdminSearchResult/UserNameList?fullName=' + $('#txtFirstName').val() + " " + ('#txtLastName').val()
    });

在我的控制器中

public ActionResult UserNameList(string term, string fullName)
{            
    // my code

    return Json(result, JsonRequestBehavior.AllowGet);
}

加载局部视图时,屏幕上有名字,姓氏和用户名。 用户输入名字和姓氏。根据输入的名字和姓氏,用户名列表(来自活动目录)成为自动完成下拉列表的数据源。

在控制器中,我在我的方法中获得了术语值,但我没有得到fullname的值

fullname is ($('#txtFirstName').val() + " " + ('#txtLastName').val())

我想,因为在文档中名字和姓氏没有任何价值。我试过这个替代

$(document).ready(function (e) {

    $('#txtUserNameAdd').autocomplete({
        source: '/AdminSearchResult/UserNameList?fullName=' + getFullname()
    });

}); 

function getFullname() {
    var lastName = document.getElementById('txtLastName').value;
    var firstName = document.getElementById('txtFirstName').value;

    return firstName + " " + lastName;
}

这也让我没有全名的价值。

有人可以帮助我获得全名的价值。

1 个答案:

答案 0 :(得分:0)

我希望这可以帮助某人,即使这个问题已经过时了。首先,在你的例子中,你一直参考
    +(&#39; #txtLastName&#39;)。val()而不是$(&#39; #txtLastName&#39;)。val()。

如果你尝试添加你遗漏的$,你的字符串应该正确解析为字段值,但是这不会修改你的自动完成值,而自动完成方法不接受动态查询字符串,所以最好这样做:

http://jquery.toitl.com/?p=2012/11/03/164155/autocomplete_with_parameter

或者创建一个处理请求提交的函数: 在你的jQuery准备好了:

//Initialize the autocomplete with jQuery options which submits on Select of item
var InitAutoComplete = function() {
var $input=$(this);
var options = {
     source: '/Index/Autocomplete',
     select: submitForm
    };
$input.autocomplete(options);
};

var ajFormSubmital = function(){
var $form= ($this); // the passed in form
var options = { 
url: 'some url',
type: 'GET',
data: $form.serialize()
};

// Now do some ajax stuff in the same scope standard ajax
$.ajax(options).done(function(data) {
var $target = $($form.find('#myspan')); //don't let the $$ fool you, one variable is named $form 
//now replace the target with the data
$newData=$(data);  //Grab the data returned by the ajax call
$target.replaceWith($newData);   
}
return false;  // we don't want the form to post directly

// create a submit form method
var submitForm = function ( e,ui ) {
var $input=$(this);  //the autocomplete input field
$input.val(ui.item.label);  //The label contains the text value can also be obtained per jQuery specs
$input.parents("form:first").submit();
}

// remember to name your variables in your controller.
// the controller will receive 'term' and also the 
// form fields will be serialized and the will have the names you assign
// in your model, not the field Ids. So concatenate in your model
// and return a json string
// Wire up the form submit event to your form in your ready event
// Wire up the autocomplete field to your your InitAutoComplete method.
// you will wire up in the $(function() {} ) - don't use $(document).ready()    
// it does not work for the ajax call after the second and even-number post     backs
// $('#myform').submit(ajFormSubmital);
//$('#myAutocomplete').each(InitAutoComplete);
// Tweak the above code and you should be able to use this in any form.