根据下拉列表MVC

时间:2018-11-06 14:45:34

标签: javascript jquery ajax asp.net-mvc entity-framework

我有一个可行的解决方案,但是从下拉列表中选择了某个ID后,我不知道如何重新加载页面。我的列表是从数据库中填充的。选择它后,我可以看到它的ID和相应的数据。但是,屏幕上没有任何变化。

模型类:

 public List<Hello> getID()
        {
            var que = (from rel in db.Table1
                       select new Hello
                       {
                           ID = rel.R_ID
                       }).ToList();
            return que;
        }

public List<Hello> getStuff()
        {
            var que = (from wre in db.View
                       select new Hello
                       {
                           ID = wre.R_ID,
                           Summary = wre.Summary,
                           Description = wre.Description

                       }
         }

getHello()与getStuff()完全相同,只是接受一个字符串ID参数。

控制器类:

public ActionResult Index()
        {
            var model = test.getStuff();
            ViewBag.IDs = new SelectList(test.getID(), "", "ID");
            return View(model);
        }

[HttpPost]
        public JsonResult getDataBySelectedID(string selectedId)
        {
            var que = test.getHello(selectedId);
             return Json(que, JsonRequestBehavior.AllowGet);

        }

Partial_View类:

 <div class="container">
        <table id="myTable" align="left">
            <tr>
                <th>@Html.DisplayNameFor(model => model.R_ID)</th>
                <th>@Html.DisplayNameFor(model => model.Summary)</th>
                <th>@Html.DisplayNameFor(model => model.Description)</th>
            </tr>

     @foreach (var item in Model)
        {
          <tr id="Home">

              <td>@Html.DisplayFor(x => item.R_ID)</td>
              <td>@Html.DisplayFor(x => item.Summary)</td>
              <td>@Html.DisplayFor(x => item.Description)</td>
           </tr>
         }
  </table>
 </div>

查看课程:

@Html.DropDownList("ID", ViewBag.IDs as SelectList) 

    <script>

     $(document).ready(function () {
         $("#ID").on("change", function () {
                var selectedId = this.value;
                var url = "/Sample/getDataBySelectedID";

                $.ajax({
                    method: "POST",
                    dataType: "json",
                    url: url,
                    data: {
                        selectedId: selectedId
                    }
                });
            });
         });
   </script>

@foreach (var item in Model)
            {
                <tr>
                    <td>
                        @{Html.RenderPartial("Partial_Index", item);}
                    </td>
                </tr>
            }

我如何能够使用所选值及其对应的数据重新加载页面?

任何帮助将不胜感激!

谢谢。

2 个答案:

答案 0 :(得分:2)

如评论中所述,您必须以某种方式将数据加载到页面中。我建议您通过局部视图执行此操作。

1)创建可重用的局部视图

首先,创建引用模型的局部视图。为此,请像往常一样为控制器创建一个视图,然后选中“部分视图”选项。确保在模型下拉列表中选择模型。

然后,将引用模型的.cshtml从当前视图移动到局部视图。例如,如果您有一个表列出了模型的字段,则可以将整个表切成局部视图。您希望在局部视图中包含最少的代码量(也就是,不要将整个视图复制到其中)。

2)在当前视图中引用局部视图

现在已经设置了部分视图,您应该在现有视图中使用它来加载表。在继续之前,您应该先确保此方法有效。您可以使用@Html.RenderPartial(string ViewName, object Model)辅助方法来呈现它。 Read more.因此,您可以将以下行放置在现在剪切的代码为@RenderPartial("MyPartialView", model)的位置,其中“ MyPartialView”是局部视图的名称,而model是您要传递的模型对象进入局部视图。

3)添加方法以在控制器上渲染部分视图

在这一点上,您只需要能够在使用AJAX之后更新部分视图。首先,您需要添加将部分视图呈现为字符串的功能,以便可以轻松地将其注入视图中。我建议您通过实现控制器接口并让控制器从中继承所需的方法来做到这一点。在我的程序中,我的控制器继承了以下控制器接口:

public class IBaseController : Controller
    {    
        internal string PartialViewToString(string partialViewName, object model = null)
        {
            ControllerContext controllerContext = new ControllerContext(Request.RequestContext, this);

            return ViewToString(
                controllerContext,
                ViewEngines.Engines.FindPartialView(controllerContext, partialViewName) ?? throw new FileNotFoundException("Partial view cannot be found."),
                model
            );
        }

        protected string ViewToString(string viewName, object model = null)
        {
            ControllerContext controllerContext = new ControllerContext(Request.RequestContext, this);

            return ViewToString(
                controllerContext,
                ViewEngines.Engines.FindView(controllerContext, viewName, null) ?? throw new FileNotFoundException("View cannot be found."),
                model
            );
        }

        protected string ViewToString(string viewName, string controllerName, string areaName, object model = null)
        {
            RouteData routeData = new RouteData();
            routeData.Values.Add("controller", controllerName);

            if (areaName != null)
            {
                routeData.Values.Add("Area", areaName);
                routeData.DataTokens["area"] = areaName;
            }

            ControllerContext controllerContext = new ControllerContext(HttpContext, routeData, this);

            return ViewToString(
                controllerContext,
                ViewEngines.Engines.FindView(controllerContext, viewName, null) ?? throw new FileNotFoundException("View cannot be found."),
                model
            );
        }
        private string ViewToString(ControllerContext controllerContext, ViewEngineResult viewEngineResult, object model)
        {
            using (StringWriter writer = new StringWriter())
            {
                ViewContext viewContext = new ViewContext(
                    ControllerContext,
                    viewEngineResult.View,
                    new ViewDataDictionary(model),
                    new TempDataDictionary(),
                    writer
                );

                viewEngineResult.View.Render(viewContext, writer);

                return writer.ToString();
            }
        }
    }

然后,您可以在控制器上像这样从该接口继承

public class ExampleController : IBaseController
{

}

现在,您可以使用新方法轻松地将部分视图呈现为字符串。

在您的getDataBySelectedID操作中,这是您想要做的。

[HttpPost]
public JsonResult getDataBySelectedID(string selectedId)
{
    var que = test.getHello(selectedId);
    string partialViewString = PartialViewToString("MyPartialView", que);
    return Json(partialViewString, JsonRequestBehavior.AllowGet);
}

您可能需要修改上面的语句以适合您的用途,但它应该使您接近。

4)将部分视图注入AJAX成功页面中

现在,我们已经设置了部分视图来处理要更新的模型数据。我们已经更新了视图,默认情况下从部分视图加载。我们已经实现了一个控制器接口,该接口将使您可以使用Partial View渲染为字符串,以便将其注入到页面中。现在,我们只需要进行注射即可。

首先,将上一个设置@Html.RenderPartial()语句包装在div中。让我们为其指定ID partialViewDiv。这将使我们可以轻松地使用jQuery作为目标。

 $(document).ready(function () {
     $("#ID").on("change", function () {
            var selectedId = this.value;
            var url = "/Sample/getDataBySelectedID";

            var $partialViewDiv = $('#partialViewDiv');

            $.ajax({
                method: "POST",
                dataType: "json",
                url: url,
                data: {
                    selectedId: selectedId
                }
            })
                .done(function (response, status, jqxhr) {
                   $partialViewDiv.html(response);
                   // Do any other updates here.
                })
                .fail(function (reponse, status, error) {
                    $partialViewDiv.html('');
                    // Handle your error here.
                });
        });
     });

同样,这些大多是伪代码,因此您可能必须进行一些修改。但是,此时,您应该大致处于所需的位置。 AJAX调用应通过使用新模型数据重新加载部分视图来更新视图。

提示

  • 加载这样的局部视图可能会破坏某些jQuery事件处理程序,具体取决于您的应用程序。如果发生这种情况,take a look at this.
  • 您可以通过AJAX调用从Controller返回任何字符串。如果需要,可以返回与最初加载的视图不同的局部视图。只需使用界面中的方法,就可以呈现所需的任何内容。

以上代码仅是一些一般准则。在不知道您的完整实现的情况下,我无法提供100%有效的,无错误的代码。但是,如果您有任何问题,请在此处发布,我会尽力提供帮助。

答案 1 :(得分:0)

我看到的解决方案是使用php

location.reload();

那是您重新加载的方式,但是如果您想重新加载数据,则可以使用类似的

window.location.replace("PathToThePage.php?YourDataName=YourData");