は変更なく、取得、私は私のgroupIdを取得していますどこダウンビューが表示され、古いデータ

Question

マイドロップ

<select id="GroupDropdown" name="GroupDropdown" onchange="Filteration();" class="form-control"></select> 

私が書いていた私のコントローラでMY JavascriptのAJAX

function Filteration() 
{ 
    var groupid = document.getElementById("GroupDropdown").value; 
    var subgroupid = document.getElementById("SubGroupDropdown").value; 
    var locationid = document.getElementById("LocationID").value; 
    var propertyname = document.getElementById("txtPropertyName").value; 
    var propertydescription = document.getElementById("Description").value; 
    $.ajax({ 
     type: 'GET', 
     contentType: "application/json;charset=utf-8", 
     url: "/Home/Index", 
     data: { 'GroupId': groupid, 'SubGroupId': subgroupid, 'LocationId': locationid, 'PropertyName': propertyname, 'Description': propertydescription}, 
     dataType: "json", 
     context: this, 
     success: function (data) { 
      console.log(data);    
     }, 
     error: function (request) {    
     } 
    }); 
} 

こんにちはGroupIdやその他のデータに従って新しいデータを取得するたびにコードを渡します。グループIDに基づいて、ここで上記のコードで

public ActionResult Index(string GroupId, string SubGroupId, string LocationId, string PropertyName, string Description) 
    { 
     using (SqlConnection con = new SqlConnection(constr)) 
     { 
      using (SqlCommand cmd = new SqlCommand("InsUpsDelTbl_Property")) 
      { 
       try 
       { 
        DataSet GetData = new DataSet(); 
        cmd.Connection = con; 
        con.Open(); 
        cmd.Parameters.AddWithValue("@Operation", "GetPropertyDataFilteration"); 
        cmd.Parameters.AddWithValue("@GroupID", GroupId); 
        cmd.Parameters.AddWithValue("@SubGroupID", SubGroupId); 
        cmd.Parameters.AddWithValue("@LocationID", LocationId); 
        cmd.Parameters.AddWithValue("@Title", PropertyName); 
        cmd.Parameters.AddWithValue("@Description", Description); 
        cmd.CommandType = CommandType.StoredProcedure; 
        SqlDataAdapter ad = new SqlDataAdapter(cmd); 
        ad.Fill(GetData);      
        ViewBag.tblProperty = GetData.Tables[1]; 
        con.Close(); 
       } 
       catch (Exception ex) 
       { throw ex; } 
      } 
     } 
     return View(); 
    } 

、ViewBag.tblPropertyのデータが変更を取得subgroupidが、ビューに表示データが変更されません。このビューは、最初にページが読み込まれるときにviewbag.tblPropertyから最初に取り出された同じデータを表示しています。

ページ読み込みイベントのマイビューページコード

最初

@foreach (System.Data.DataRow dr in ViewBag.tblProperty.Rows) 
    {   
     <p><b>Group:</b> @dr["GroupName"].ToString()</p> 
     <p><b>SubGroup:</b> @dr["SubGroupName"].ToString()</p> 
     <p><b>Location:</b> @dr["LocationName"].ToString()</p> 
     <p><b>Age:</b> @dr["Age"].ToString() Years</p> 
    } 

グループID、サブグループIDがその時点で4つのデータをデータベースから検索し、そのデータを取得するために使用される取得するために使用されるように空を渡すために使用されviewbag.tblPropertyでバインドしますが、グループID、サブグループidデータを変更した後は、データベースから2つのデータしか取得されず、viewbag.tblPropertyは再びそのデータにバインドされますが、ビューページでは4つのデータを持つ古いレコードが使用されます。

は、どのように私はあなたのドロップダウンを変更すると、あなたはAJAX呼び出しを行いFilteration javascriptのメソッドを呼び出しているデータベース

Answer 1

から取得したデータに基づいて表示を変更することができます。アクションメソッドでは、ビューバックを設定してビューを返します。しかし、あなたの元のかみそりのビューコードはすでに実行されており、現在あなたのブラウザに表示されている出力）。

2つの選択肢があります。

1. ajax呼び出しを使用しないでください。

したがって、ajax呼び出しを行う代わりに、選択した値をquerystring paramsとしてGETアクションメソッドに対して通常のHTTP要求を行います。現在のアクションメソッドコードでは、ビューバックデータを設定してビューを返します。かみそりがコードを実行すると、新しいデータがviewBagにレンダリングされます。

function Filteration() 
{ 
    var groupid = $("#GroupDropdown").val(); 
    var subgroupid = $("#SubGroupDropdown").val(); 
    var locationid = $("#LocationID").val(); 
    var propertyname = $("#txtPropertyName").val(); 
    var propertydescription = $("#Description").val(); 

    var baseUrl="/Home/Index?groupId="+groupId+"&subgroupid="+subgroupid+ 
        "&locationId="+locationid+"&propertyname="+propertyname+ 
        "&propertydescription"=propertydescription ; 
    window.location.href=baseUrl; 
} 

2.アヤックスが、アクションメソッドを持つ部分ビューの結果を返します。

アクションメソッドにajax呼び出しの部分ビュー結果を返します。したがって、部分的なビューを作成し、リクエストがajax呼び出しであるときにそれを戻し、ajax呼び出しから正常な応答を受け取ったときに現在のページのDOMを更新します。

だからResultListと呼ばれる部分図を作成し、それがこのコード

@foreach (System.Data.DataRow dr in ViewBag.tblProperty.Rows) 
{   
     <p><b>Group:</b> @dr["GroupName"].ToString()</p> 
     <p><b>SubGroup:</b> @dr["SubGroupName"].ToString()</p> 
     <p><b>Location:</b> @dr["LocationName"].ToString()</p> 
     <p><b>Age:</b> @dr["Age"].ToString() Years</p> 

}

を持つことになりますし、あなたのアクションメソッドは、今、この部分図

if(Request.IsAjaxRequest()) 
{ 
    return PartialView("ResultList"); 
} 
return View(); 

を返すメインビューにアクセスしてくださいループコードをpartialへの呼び出しで置き換え、コンテナdiv内にラップします。

<div id="results"> 
    @Html.Partial("ResultList") 
</div> 

あなたのajaxコールのsuccess/doneイベントでは、このコンテナdivの内容をajax呼び出しの結果で更新します。

success: function (data) { 
     $("#results").html(data);    
},