添加選擇屬性Html.DropDownList使用JQuery

Question

我有以下的HTML元素：

<tr> 
    <td> <label for="casenumber">Case:</label></td> 
    <td> 
    <%=Html.TextBox("casenumber", "", new Dictionary<string, object> 
    { 
     {"id", "casenumberID"} 
    })%> 
    </td> 
</tr> 
<tr> 
    <td><label for="fogbugzUser">Users:</label></td> 
    <td> 
    <%=Html.DropDownList("UserList", (SelectList)ViewData["UserList"], new Dictionary<string, object> 
    { 
     {"id", "userlistid"} 
    })%> 
    </td> 
</tr> 

現在，當「casenumber」失去焦點，我想調用數據庫返回我選擇的價值「UserList」。

這裏是JavaScript的：

$(function() { 
    $("#casenumberID").blur(function() { 
    //don't know how to do!!); 
    });  
}); 

和這裏的客戶端腳本：

public JsonResult GetOpenByUser(string casenumber) 
{ 
    return Json(userContext.OpenBy(casenumber)); 
} 

的問題是如何寫的函數「模糊」，這樣我可以在的值傳遞文本框「casenumber」到GetOpenByUser？

此外，如何完成「模糊」功能，以便選擇具有與GetOpenByUser返回的值相同的值的選項？

Answer 1

我jQuery的使用this爲selectboxes

Answer 2

的（ASP.NET MVC獨立）接近你的預期是正確的：

• 的onblur：使Ajax請求的數據庫
• Ajax的成功：讀取和解析響應
• 在#fogbugzUser中選擇合適的值

示例代碼，假設您的頁面正在返回帶有ID的純字符串，而沒有其他內容。在這裏，我使用get()來提出請求，但還有更多方法可以實現。

$(function() { 
    $("#casenumberID").blur(function() { 
    $.get(
     "url/to/some.page/fetching.the.userid", 
     // this will be turned into URL parameters, e.g.: "casenumberID=15" 
     { casenumberID: this.value }, 
     function(result) { 
     /* check if result is a string of numbers only (change for 
     * something that better suits your needs if numbers is not 
     * what you expect here */ 
     if (/^\d+$/.test(result)) 
      $("#fogbugzUser").val(result); 
     else 
      alert("Server returned an unexpected result: " + result); 
     } 
    });  
    }); 
}); 

您還可以返回JSON，在您的服務器響應。在這種情況下，getJSON()將是你的朋友。

Answer 3

下面的代碼，對於那些誰去需要它，測試了ASP.NET MVC的測試工作1：

服務器端AJAX：

public JsonResult GetOpenByUser(string casenumber) 
    { 

     return Json(userContext.OpenBy(casenumber)); 
    } 

的HTML：

<form id="subForm"> 
    <tr> 
    <td> <label for="casenumber">Case:</label></td> 
    <td><%=Html.TextBox("casenumber", "")%> </td> 
    </tr> 
    <tr> 
    <td><label for="fogbugzUser">Users:</label></td> 
    <td><%=Html.DropDownList("UserList", (SelectList)ViewData["UserList"])%></td> 
    </tr> 
</form> 

腳本：

$(function() { 
    $("#casenumber").blur(function() { 
     $.getJSON("Home/GetOpenByUser", 
    { casenumber: this.value }, 
    function(result) { 
     if (result == "") 
      return; 

     $("#subForm select[@name='UserList'] option[@selected='selected']").removeAttr("selected"); //remove any selected items 
     $("#subForm select[@name='UserList'] option[@value='" + result + "']").attr("selected", "selected"); //select the item that is returned from the server 

    }); 
    }); 

}); 

Answer 4

，或者，對於jQuery腳本的一部分，一個可以寫

$(function() { 
    $("#casenumber").blur(function() { 
     $.getJSON("Home/GetOpenByUser", 
    { casenumber: this.value }, 
    function(result) { 
     if (result == "") 
      return; 

$("#UserList").val(this.value) 

    }); 
    }); 

});