CascadingDropDowns Webmatrix

问题

So i was following this tutorial

http://www.mikesdotnetting.com/Article/196/WebMatrix-jQuery-Cascading-Dropdown-Lists

Everything works nice, but when i save to the database the first dropdown, pass me the ID and i can't figure it out how to pass the name instead of the ID.

 <select id="categoryId" name="categoryId">
            <option value="">-- Select Category --</option>
             @foreach(var category in categories){
              <option value="@category.CategoryId">@category.CategoryName</option>
        }
        </select>

I know that it's this that pass's the ID, but if i change it the child dropdown, doesn't show any option.

This is the helper

    var data = db.Query("SELECT CategoryId, CategoryName FROM categorias ORDER BY CategoryName");
    var categories = data.Select(item => new SelectListItem {
    Value = item.CategoryId.ToString(), 
    Text = item.CategoryName
});

And this is whats creates the Json

@{
Layout = null;
var categoryId = UrlData[0].IsEmpty() ? 1 : UrlData[0]; 
var db = Database.Open("AppCCentro");
var sql = "SELECT ProductId, ProductName FROM produtos WHERE CategoryId = @0 ORDER BY ProductName";
var products = db.Query(sql, categoryId);
Json.Write(products, Response.Output);
}

I can't figure it out what do i have to change, so that the value that it's passed on option selected it's not the ID but the name of the category.

回答1:

I'm not sure of what you want to accomplish, but if your goal is to optain the CategoryName instead of the CategoryId from your first DropDown you should modify the option tag as follows:

<option value="@category.CategoryName">@category.CategoryName</option>

You should also use

<option>@category.CategoryName</option>

because, if you don't specify a value, the default value is the content between the opening and closing tags.

Accordingly, you could modify the helper as follows

var data = db.Query("SELECT CategoryName FROM categorias ORDER BY CategoryName");
var categories = data.Select(item => new SelectListItem {
    Text = item.CategoryName
});

because you don't need the CategoryId no more.

Edited

Obviously you must modify the page that creates the json, something like

@{
    Layout = null;
    var categoryId = UrlData[0].IsEmpty() ? "Beverages" : UrlData[0];
    var db = Database.Open("AppCCentro");
    var sql = @"SELECT t1.ProductId, t1.ProductName FROM produtos t1
        INNER JOIN categorias t2 ON t1.CategoryId = t2.CategoryId WHERE 
        t2.CategoryName = @0 ORDER BY ProductName";
    var products = db.Query(sql, categoryId);
    Json.Write(products, Response.Output);
}

and probably you have the problem of encode the '/' character if it is contained in a CategoryName.

来源：https://stackoverflow.com/questions/24829375/cascadingdropdowns-webmatrix

标签

json

razor

webmatrix