如何在C#/ASP.NET的MVC项目中使用jQuery或Ajax来更新Razor部分视图。

18 浏览
0 Comments

如何在C#/ASP.NET的MVC项目中使用jQuery或Ajax来更新Razor部分视图。

在一个MVC的局部视图文件中，我创建了一个Html.TextBox和两个提交按钮。这两个按钮在点击后会增加/减少Html.TextBox的值。Html.TextBox的显示值会相应地改变。然而，一旦我需要根据点击后的新值更新#refTable div，页面或部分就不会更新。以下是代码，其中添加了一些注释以说明目的。谢谢你的帮助。

//****** cshtml文件 *********//

@{

var tempItem3 = Model.First(); // 只从数据库中获取第一个条目，有效。

if (ViewData["curSel"] == null)

{

@Html.TextBox("yearSelect3", Convert.ToDateTime(tempItem3.Holiday_date).Year.ToString());

ViewBag.selYear = Convert.ToDateTime(tempItem3.Holiday_date).Year; // 只是初始值，有效

ViewData["curSel"] = Convert.ToDateTime(tempItem3.Holiday_date).Year;

}

else

{

@Html.TextBox("yearSelect3", ViewData["curSel"].ToString());

}

}

设置2013年假日日历

@Html.ActionLink("添加假日", "Create", null, new { id = "addHilBtn" })

@foreach (var item in Model)

{

if ( Convert.ToDateTime(item.Holiday_date).Year == ViewBag.selYear)

// 如果ViewBag.selYear是硬编码的，这个选择“有效”

{

}

}

假日

日期

 修改 删除

@Html.DisplayFor(modelItem => item.Holiday_Name)

@item.Holiday_date.Value.ToString("MM/dd/yyyy")

@Html.ActionLink("编辑", "Edit", new { })

@Html.ActionLink("删除", "Delete", new { })
0

3 答案

0 Comments

使用jQuery或Ajax来更新C#/ASP.NET中的Razor部分视图是MVC项目中常见的需求。部分视图的主要概念是返回HTML代码而不是直接访问部分视图本身。

在上述代码中，我们可以看到一个名为"Calendar"的HttpGet方法。该方法接收一个名为"year"的参数，并根据该参数生成一个包含日期的列表。然后，将这些日期作为数据模型传递给名为"HolidayPartialView"的部分视图，并返回该部分视图的HTML代码。

为了实现部分视图的刷新，我们可以使用以下的jQuery代码。该代码通过发送一个GET请求到"/Holiday/Calendar"的URL，并传递一个名为"year"的参数，来获取最新的部分视图。然后，通过使用返回的部分视图结果来替换id为"refTable"的元素的HTML内容。

完整代码如下：

$.ajax({
    url: "/Holiday/Calendar",
    type: "GET",
    data: { year: ((val * 1) + 1) }
})
.done(function(partialViewResult) {
    $("#refTable").html(partialViewResult);
});

通过这种方式，我们可以实现使用jQuery或Ajax来更新Razor部分视图的功能。这对于需要动态刷新部分视图内容的MVC项目非常有用。

0
0 Comments

问题的原因是希望在不重新加载整个页面的情况下更新页面的一部分。解决方法是使用AJAX来实现。

首先，在主cshtml视图中，将要更新的部分包裹在一个

标签中，并给它一个id属性（id="refTable"）。然后添加一个按钮（），并使用jQuery的ajax方法来发送GET请求到服务器。

在document.ready函数中，给按钮添加一个点击事件监听器。当按钮被点击时，获取年份选择框的值，然后使用ajax方法发送GET请求到"/Holiday/Calendar" URL，并将年份作为参数传递给服务器。当服务器返回响应时，使用.done方法将返回的局部视图插入到id为"refTable"的

中。

在HolidayController中，添加一个名为Calendar的HttpGet方法。该方法接收一个年份参数，并返回一个包含日期列表的局部视图。使用一个强类型的视图模型（HolidayViewModel）来传递数据。

视图模型HolidayViewModel包含一个属性Dates，它是一个IEnumerable类型的日期列表。

HolidayPartialView.cshtml是被插入到

中的局部视图。它使用一个循环来遍历日期列表，并将每个日期以特定的格式输出到一个表格中。

在最后的代码段中，提到了为什么要使用.done方法而不是.success回调。因为.success、.error和.complete回调在jQuery 1.8版本之后已被弃用，推荐使用.done、.fail和.always方法。

使用jQuery或AJAX来更新Razor局部视图的方法是通过发送GET请求到服务器并将返回的局部视图插入到指定的HTML元素中。这样可以实现局部更新而不重新加载整个页面。

0
0 Comments

问题的出现原因：需要在C#/ASP.NET的MVC项目中使用jQuery或Ajax来更新Razor的部分视图。

解决方法：

1. 使用Url.Action来设置路径：

$.ajax({
        url: "@Url.Action("Holiday", "Calendar", new { area = "", year= (val * 1) + 1 })",                
        type: "GET",           
        success: function (partialViewResult) {            
            $("#refTable").html(partialViewResult);
        }
    });

0