AJAX和MVC（C＃） [英] AJAX and MVC (C#)

问题描述

我从来没有使用AJAX和很坦率地说，没有多少精通JS无论是。

I've never used AJAX and am, quite frankly, not much versed in JS either.

我有一个页面（产品的浏览器）有以下故障：

I have a page (Product Browser) that has the following breakdown:

1. 导航（第一，preV，1，2，3 接下来，最后） - 满后回
2. 在每页项目下拉 - 我想这AJAX
3. 在左侧列 - 过滤器 - 我想这AJAX
4. 在产品展示区 - 根据1，2和显示产品;以上3

1. Navigation (First, Prev, 1, 2, 3 Next, Last) - full post back
2. Items per Page drop down - I want to AJAX this
3. Left Column - Filters - I want to AJAX this
4. Product Display area - displays products based on 1, 2 & 3 above

我开始与项目＃2，我试图找出如何改变基于关闭OnChange事件下拉项目4。我很茫然到哪里。还是怎么的，开始。它应该是AJAX？ JQuery的？两者的结合？请记住 - 这是一个基于MVC的应用程序

I am starting with Item #2 and am trying to figure out how to change item 4 based off of the OnChange event for the drop down. I am at a loss as to where. or how, to start. Should it be AJAX? JQuery? A combination of both? And remember - it is in a MVC based app.

TIA

推荐答案

在回答你的问题肯定是：是的。

The answer to your question is definitely, "yes".

我得到了一个在我的面前，现在，所以我会尽量抽象出来。

I've got one in front of me right now, so I'll try to abstract it out.

首先，创建一个控制器动作返回一个JsonResult（而不是的ActionResult）。除了它的返回类型，它只是像任何其他动作，这样你就可以发送参数等的唯一的事情是真的不同的是，你要返回一个JsonResult（）对象，设置它的数据属性和其他任何场所可能需要。矿山看起来像这样（很伪codish ...）：

First, create a controller action that returns a JsonResult (rather than ActionResult). Other than its return type it's just like any other action, so you can send parameters, etc. The only thing that's really different is that you're going to return a JsonResult() object, setting its Data property and any other properties that you may need. Mine looks something like this (very pseudo-codish...):

public JsonResult GetList(int parentId)
{
  var results = dataRepository.GetById(parentId);

  return new JsonResult()
  {
    Data = results.ToArray();
  };
}

现在，在你看来，创建一个脚本，看起来是这样的。请注意，这是jQuery的语法，所以它可能看起来有点不寻常，如果你不熟悉它。

Now, in your view, create a script that looks something like this. Note that this is jQuery syntax, so it may look a bit unusual if you're not familiar with it.

<script language="javascript" type="text/javascript">
// When the document is ready, start firing our AJAX
$(document).ready(function() {
  // Bind a function to the "change" event of our drop-down list
  $("#dropDownId").bind("change", function(e) {
    updateList();
  });
}

var retrieveData = function(path, parentId, fnHandleCallback) {
  // Use the getJSON method to call our JsonResult action
  $.getJSON(path, { parentId: parentId }, function(data) {
    fnHandleCallback(data);
  });
};

// The path parameter is our JSON controller action
function updateList() {
  retrieveData("/Controller/GetList", $("#dropDownId").val(), handleResponse);
}

function handleResponse(data) {
  // Ok, now we have the JSON data, we need to do something with it.  I'm adding it to another dropdown.
  $("#otherDropDownId > option").remove();

  for (d in data)
  {
    var item = data[d];

    $("#otherDropDownId").append("<option value=\"" + item.Value + "\">" + item.Text + "</option>");
  }
}
</script>

<%= Html.DropDownList("dropDownId", new SelectList(new List<SelectListItem>())) %>
<%= Html.DropDownList("otherDropDownId", new SelectList(new List<SelectListItem>())) %>

这是大家都非常关我的头顶，所以让我知道，如果有什么需要澄清或纠正。

This is all very much off the top of my head, so let me know if something needs to be clarified or corrected.

修改

正如在我的评论，以AJAXify你的页面，你真的不希望周围的一切都在你的模型推。相反，它听起来像你想是这样的：

As noted in my comment, in order to "AJAXify" your page, you don't really want to push everything around in your Model. Instead, it sounds like you want something like this:

控制器操作：

public JsonResult GetPagedData(int page, int itemsPerPage, string[] filters)
{
  var results = dataRepository.GetPagedItems(pageId, itemsPerPage, filters);

  return new JsonResult()
  {
    Data = results.ToArray();
  };
}

JS变化：

JS changes:

var retrieveData = function(path, pageNumber, pageSize, filters, fnHandleCallback) {
  // Use the getJSON method to call our JsonResult action
  $.getJSON(path, { page: pageNumber, itemsPerPage: pageSize, filters: filters }, function(data) {
    fnHandleCallback(data);
  });
};

// The path parameter is our JSON controller action
function updateList() {
  retrieveData("/Controller/GetPagedData", $("#pageNumber").val(), $("#dropDownId").val(), null, handleResponse);
}

我有意忽略的搞清楚两者的页码和过滤器 - 他们将遵循本质上是相同的原则

I've intentionally ignored figuring out both the page number and the filters - they would follow essentially the same principles.

最后，当你渲染的数据，你就会把它变成你的产品电网，而不是另一个下拉。

Finally, when you're rendering the data you'll put it into your product grid rather than another drop-down.

这篇关于AJAX和MVC（C＃）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！