如何使用jquery或ajax在c#/asp.net中為MVC項目更新razor局部視圖

Question

在 MVC 部分視圖文件中，我構建了一個 Html.TextBox 和兩個提交按鈕。 這兩個按鈕將在單擊后增加/減少 Html.TextBox 值。 Html.TextBox 顯示的值將相應更改。但是，一旦我需要在單擊后根據新值更新 #refTable div。 該頁面或部分從未更新。 代碼如下，其中添加了一些注釋以供解釋。 謝謝你的幫助。

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

<body>
</body>

<input type="submit" value="PrevY" name="chgYr2" id="pY" />
@{
    var tempItem3 = Model.First(); // just give the first entry from a database, works.
    if (ViewData["curSel"] == null)
    {
    @Html.TextBox("yearSelect3", Convert.ToDateTime(tempItem3.Holiday_date).Year.ToString());  
    ViewBag.selYear = Convert.ToDateTime(tempItem3.Holiday_date).Year; // just initial value, works
    ViewData["curSel"] = Convert.ToDateTime(tempItem3.Holiday_date).Year;
    }
    else
    {
    @Html.TextBox("yearSelect3", ViewData["curSel"].ToString());
    } 
}
<input type="submit" value="NextY" name="chgYr2" id="nY" />


<script type="text/javascript">
    $(document).ready(function () {
        $(document).on("click", "#nY", function () {
            var val = $('#yearSelect3').val();
            $('#yearSelect3').val((val * 1) + 1);
            var dataToSend = {
                id: ((val * 1) + 1)
            }
            // add some jquery or ajax codes to update the #refTable div
            // also ViewBag.selYear need to be updated as ((val * 1) + 1)
            // like:   ViewBag.selYear = ((val * 1) + 1);
            // any similar temp variable is fine
        });

        });
        $(document).on("click", "#pY", function () {
            var val = $('#yearSelect3').val();
            $('#yearSelect3').val((val * 1) - 1);
            var dataToSend = {
                id: ((val * 1) - 1)
            }

        });
    });
</script>



<span style="float: right"><a href="/">Set Holiday Calender for 2013</a></span>
<span id="btnAddHoliday">@Html.ActionLink("Add Holiday", "Create", null, new { id = "addHilBtn" })</span>

<div id="refTable">
    <table class="tblHoliday" style="width: 100%;">
            <th>
                Holiday
            </th>
            <th>
                Dates
            </th>
            <th>Modify</th>
            <th>Delete</th>
        </tr>

        @foreach (var item in Model)
        {

            if (    Convert.ToDateTime(item.Holiday_date).Year == ViewBag.selYear)
            // if the ViewBag.selYear is hard code, this selection "works"
            {
            <tr>                
                <td>
                    @Html.DisplayFor(modelItem => item.Holiday_Name)
                </td>               
                <td>
                    @item.Holiday_date.Value.ToString("MM/dd/yyyy")
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new {  })
                </td>
                <td>
                    @Html.ActionLink("Delete", "Delete", new {  })
                </td>
            </tr>
            }
        }

    </table>
</div>

Answer 1

如果您想在不重新加載整個頁面的情況下更新頁面的一部分，則需要 AJAX。

主 cshtml 視圖

<div id="refTable">
     <!-- partial view content will be inserted here -->
</div>

@Html.TextBox("yearSelect3", Convert.ToDateTime(tempItem3.Holiday_date).Year.ToString());
<button id="pY">PrevY</button>

<script>
    $(document).ready(function() {
        $("#pY").on("click", function() {
            var val = $('#yearSelect3').val();
            $.ajax({
                url: "/Holiday/Calendar",
                type: "GET",
                data: { year: ((val * 1) + 1) }
            })
            .done(function(partialViewResult) {
                $("#refTable").html(partialViewResult);
            });
        });
    });
</script>

您需要添加我省略的字段。 我使用了<button>而不是提交按鈕，因為你沒有表單（我在你的標記中沒有看到一個），你只需要它們在客戶端觸發 javascript。

HolidayPartialView被渲染成 html，jquery done回調將該 html 片段插入到refTable div 中。

HolidayController 更新操作

[HttpGet]
public ActionResult Calendar(int year)
{
    var dates = new List<DateTime>() { /* values based on year */ };
    HolidayViewModel model = new HolidayViewModel {
        Dates = dates
    };
    return PartialView("HolidayPartialView", model);
}

此控制器操作采用 year 參數並使用強類型視圖模型而不是 ViewBag 返回日期列表。

視圖模型

public class HolidayViewModel
{
    IEnumerable<DateTime> Dates { get; set; }
}

HolidayPartialView.csthml

@model Your.Namespace.HolidayViewModel;

<table class="tblHoliday">
    @foreach(var date in Model.Dates)
    {
        <tr><td>@date.ToString("MM/dd/yyyy")</td></tr>
    }
</table>

這是插入到您的 div 中的內容。

Answer 2

分部視圖的主要概念是返回 HTML 代碼而不是自行轉到分部視圖。

[HttpGet]
public ActionResult Calendar(int year)
{
    var dates = new List<DateTime>() { /* values based on year */ };
    HolidayViewModel model = new HolidayViewModel {
        Dates = dates
    };
    return PartialView("HolidayPartialView", model);
}

此操作返回局部視圖的 HTML 代碼（“HolidayPartialView”）。

要刷新部分視圖，請使用下面的 jQuery 將現有項目替換為新過濾的項目。

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

Answer 3

您也可以使用 Url.Action 作為路徑，而不是像這樣：

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

如何使用jquery或ajax在c#/asp.net中為MVC項目更新razor局部視圖

問題描述

3 個解決方案

解決方案1
79 2013-10-16 18:27:15

解決方案2
2 2016-11-24 11:52:39

解決方案3
0 2018-04-13 16:35:18

如何使用jquery或ajax在c#/asp.net中為MVC項目更新razor局部視圖

問題描述

3 個解決方案

解決方案1 79 2013-10-16 18:27:15

解決方案2 2 2016-11-24 11:52:39

解決方案3 0 2018-04-13 16:35:18

解決方案1
79 2013-10-16 18:27:15

解決方案2
2 2016-11-24 11:52:39

解決方案3
0 2018-04-13 16:35:18