0

カスケードドロップダウンリストを相互にasp.net mvc3にロードする方法は? どのようにできるのか？私は http://geekswithblogs.net/ranganh/archive/2011/06/14/cascading-dropdownlist-in-asp.net-mvc-3-using-jquery.aspxから利用しています

でもできないんです。私の間違いは何ですか？LoadJobByCustomerId メソッドにデバッグ レッド ポイントを追加しました。しかし、動作していません.48時間以内にグーグルで検索しないでください... 表示:


<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ChildSite.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Index
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript" src="../../Scripts/jquery-1.4.4.js">


    $(document).ready(function () {
        $("#ddlCustomers").change(function () {
            var idColour = $(this).val();
            $.getJSON("/Job/LoadJobByCustomerId", { customerId: idColour },
function (modelData) {
    var select = $("#ddlJobs");
    select.empty();
    select.append($('<option/>', {
        value: 0,
        text: "Select a Colour"
    }));
    $.each(modelData, function (index, itemData) {

        select.append($('<option/>', {
            value: itemData.Value,
            text: itemData.Text
        }));
    });
});
        }); 


</script>
  <% 
   using (Html.BeginForm())
      { %>

       <table style="padding:25px; margin:10px 10px 10px 10px;" id="sample">
                <tr><td>Customer Name: </td><td>
               <%= Html.DropDownList("Customers", null, "** Please Select **", new { id="ddlCustomers"})%>
                </td></tr>
                 <tr><td>Job Name:</td><td>
              <%= Html.DropDownList("Jobs", null, "** Please Select **", new { id = "ddlJobs" })%>
                </td></tr>
                </table>
                <br />
                <div>

                </div>
         <%}%>

</asp:Content>

コントローラ：


 public class JobController : Controller
    {
     public ActionResult Index()
        {
            ViewData["Customers"] = new SelectList(CustomerOperation.GetCustomers().Items, "Id", "Name", null);
            ViewData["Jobs"] = new SelectList(JobOperation.GetCustomersAssemblyList().Items, "scheduleId", "name", null);
            return View();
        }


        [AcceptVerbs(HttpVerbs.Get)]
        public JsonResult LoadJobByCustomerId(int customerId)
        {
            var jobs = JobOperation.GetCustomersAssemblyList(customerId).Items;

            var jobItems = jobs.Select(c => new SelectListItem()
            {
                Text = c.name,
                Value = c.scheduleId.ToString()

            });

            return Json(jobItems, JsonRequestBehavior.AllowGet);
        }
4

2 に答える 2

1

まず、<script>jquery をロードしているタグが適切に閉じられていません。

<script type="text/javascript" src="../../Scripts/jquery-1.4.4.js">

次のようになります。

<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-1.4.4.js") %>"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#ddlCustomers').change(function () {
            var idColour = $(this).val();
            var url = '<%= Url.Action("LoadJobByCustomerId", "Job") %>';
            $.getJSON(url, { customerId: idColour }, function (modelData) {
                var select = $("#ddlJobs");
                select.empty();
                select.append($('<option/>', {
                    value: 0,
                    text: "Select a Colour"
                }));
                $.each(modelData, function (index, itemData) {
                    select.append($('<option/>', {
                        value: itemData.Value,
                        text: itemData.Text
                    }));
                });
            });
        }); 
    });
</script>

<% using (Html.BeginForm()) { %>
    <table style="padding:25px; margin:10px 10px 10px 10px;" id="sample">
        <tr>
            <td>Customer Name: </td>
            <td>
                <%= Html.DropDownList(
                    "Customers", 
                    null, 
                    "** Please Select **", 
                    new { id = "ddlCustomers" }
                )%>
            </td>
        </tr>
        <tr>
            <td>Job Name:</td>
            <td>
                <%= Html.DropDownList(
                    "Jobs", 
                    null, 
                    "** Please Select **", 
                    new { id = "ddlJobs" }
                )%>
            </td>
        </tr>
    </table>
<% } %>

また、jQuery 1.4.4 はちょっと古いです。より新しいバージョンに切り替えたいと思うかもしれません。

私があなたのコードで修正したもう 1 つの点は、URL をハードコーディングする代わりに Url ヘルパーを使用する});こと、document.readyハンドラーの終了が欠落していること、一貫性のない開始と終了<tr>と<td>タグによるマークアップの破損などです。

皆さんがどのようにコードを書いたりインデントしたりしているのかはわかりませんが、もう少し注意を払うことをお勧めします.

次回、JavaScript を多用する Web アプリケーションを開発していて、何かがうまくいかないときは、すぐに反射的に FireBug コンソールまたは Chrome 開発者ツールバー (使用している Web ブラウザーによって異なります) を確認する必要があります。調査。FireBug は、コードでコミットしたエラーの少なくとも 50% について警告を発します。

ViewDataこのコードのさらなる改善は、ビュー モデルと強く型付けされたヘルパーの使用を導入することによって取り除くことです。

于 2012-06-30T11:18:20.363 に答える
0

Knockout http://knockoutjs.com/を使用し、それを使用してカスケード ドロップダウン リストを作成することをお勧めします。ページの動作を駆動する ViewModel を作成すると、よりクリーンで保守しやすいコードを作成できます。

この記事をご覧ください http://weblogs.asp.net/raduenuca/archive/2011/03/06/asp-net-mvc-cascading-dropdown-lists-tutorial-part-1-defining-the-problem- and-the-context.aspx

大陸、地域、国に対して常に同様の手法を使用しており、コードの保守と拡張は非常に簡単です。

于 2012-07-01T14:37:24.200 に答える