Question

我下载的地方是我的groupId

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

我的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和其他数据传递获取新数据时。

  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();
    }

在上面的代码中，基于groupid，subgroupid，ViewBag.tblProperty的数据发生了变化，但是在视图上显示的数据没有变化。当第一次加载页面时，视图显示最初从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个数据的相同旧记录进行显示。

如何根据从数据库中检索的数据更改视图

Answer 1

当您更改下拉列表时，您正在调用执行ajax调用的Filteration javascript方法。在您的操作方法中，您将设置视图包并返回视图。但是您的原始剃刀视图代码已经执行，并且您当前在浏览器中看到了它的输出。

您有2个选项。

<强> 1。不要使用ajax调用。重新加载GET操作

因此，不是进行ajax调用，而是对GET操作方法发出正常的HTTP请求，并将所选值作为查询字符串参数。使用当前的操作方法代码，它设置viewbag数据并返回视图。当razor执行代码时，它将在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，但让action方法返回部分视图结果。

让您的action方法返回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调用成功/完成事件中，使用来自ajax调用的结果更新此容器div的内容。

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

在下拉列表中，选择viewbag数据会更改，但视图会显示旧数据

1 个答案: