使用Ajax或JQuery的Asp.Net MVC排序功能 [英] Asp.Net MVC sorting capabilities using ajax or JQuery

问题描述

您好，我来这里时遇到了这样一个未解决的问题.

我已经在ASP.NET MVC 4 Web应用程序中使用了包含数据表的特定页面，
(请参见下文)，此页面仅包含一个表，其中包含数据，选项集和用于根据选项集中的值更改表内容的按钮:

Hi i came here with such unresolved issue.

I''ve ASP.NET MVC 4 web application with specific page which contains table of data,
(see below), this page simply contains a table with data, option set, and button to change table content according to value in option set:

<h2>
	Index</h2>
<p>
	@Html.ActionLink("Create New", "Create") 
</p>
<p>
<fieldset>
		Movie Type
		<select id="prePurchaseType" name="Type">
			<option value="0" selected="selected">Time to start</option>
			<option value="1">Highest prize value</option>
		</select>
		<input type="submit" id="btnSearch" value="Search" />
	</fieldset>
</p>

<table>
	<tr>
		<th>
			@Html.DisplayNameFor(model => model.RoomName)
		</th>
		<th>
			@Html.DisplayNameFor(model => model.TimeToStart)
		</th>
		<th>
			@Html.DisplayNameFor(model => model.PrizeValue)
		</th>
		<th>
		</th>
	</tr>
	@foreach (var item in Model)
 {
		<tr>
			<td>
				@Html.DisplayFor(modelItem => item.RoomName)
			</td>
			<td>
				@Html.DisplayFor(modelItem => item.TimeToStart)
			</td>
			<td>
				@Html.DisplayFor(modelItem => item.PrizeValue)
			</td>
			<td>
				@Html.ActionLink("Edit", "Edit", new { id = item.RoomId }) |
				@Html.ActionLink("Details", "Details", new { id = item.RoomId }) |
				@Html.ActionLink("Delete", "Delete", new { id = item.RoomId })
			</td>
		</tr>
 }
</table>
<script type="text/javascript" src="@Url.Content("~/Script/jquery-ui-1.8.11.min.js")" />
<script type="text/javascript">
	$(document).ready(function () {
		$('btnSearch').click(function () {
			var type = $("#prePurchaseType").val();

			$.ajax({
				type: "POST",
				contentType: "application/json; charset=utf-8",
				url: "Order/OrderByType",
				data: '{"type":"' + type + '"}',
				dataType: "json",
				success: function (msg) {
					$('.item_wrap').after('<div>' + msg.d + '</div>');
				},
				error: function (xhr, status, error) {
					var err = eval("(" + xhr.responseText + ")");
					alert(err.Message);
				}
			});
		});
	});
</script>

控制器方法:

Controller method:

[HttpPost]
        public ActionResult Order(Models.PrePurchaseSearch search)
        {
            try
            {
                if (!ModelState.IsValid)
                {
                    return Json(new
                    {
                        Result = "ERROR",
                        Message = "Form is not valid! " +
                        "Please correct it and try again."
                    });
                }
                return Json(new { Result = "OK", Record = search });
            }
            catch (Exception ex)
            {
                return Json(new { Result = "ERROR", Message = ex.Message });
            }
            return Index();
        }

其中Models.PrePurchaseSearch为:

where Models.PrePurchaseSearch is:

public class PrePurchaseSearch
    {
        public string Type { get; set; }
    }

也许有人可以通过以下方式帮助我解决问题并重写我的实现，即通过在我的选择控件中选择适当的数据并按btnSearch，应用程序将更改内容(按适当的prePurchaseType排序数据)
??

Maybe someone can help me with this issue and rewrite my implementation in such way, that by selecting appropriate data in my select control and pressing btnSearch , application will change content (sort data by appropriate prePurchaseType)
??

推荐答案

(文档).ready( function (){

(document).ready(function () {

(' btnSearch' ).click(函数(){ var type =

('btnSearch').click(function () { var type =

(" ).val();

("#prePurchaseType").val();

这篇关于使用Ajax或JQuery的Asp.Net MVC排序功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！