it-swarm.com.de

Wie man mit jquery oder ajax die Teilansicht von razor in c #/asp.net für ein MVC-Projekt aktualisiert

In einer MVC-Teilansichtdatei erzeuge ich eine Html.TextBox und zwei Übergabeschaltflächen. Diese beiden Schaltflächen erhöhen oder verringern den Html.TextBox-Wert, wenn Sie darauf klicken. Der angezeigte Wert für Html.TextBox ändert sich entsprechend. Sobald ich jedoch das #refTable -Div basierend auf dem neuen Wert nach dem Klicken aktualisieren muss. Die Seite oder der Abschnitt wurde nie aktualisiert. Nachfolgend finden Sie Codes, zu denen einige Erläuterungen hinzugefügt werden. Danke für Ihre Hilfe.

//* ** * *** cshtml Datei ** * ** * **** / /

<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>
40
user2029505

Sie benötigen AJAX, wenn Sie einen Teil Ihrer Seite aktualisieren möchten, ohne die gesamte Seite neu laden zu müssen.

main cshtml view

<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>

Sie müssen die Felder hinzufügen, die ich ausgelassen habe. Ich habe einen <button> anstelle von Submit-Buttons verwendet, weil Sie kein Formular haben (ich sehe in Ihrem Markup kein Formular) und Sie brauchen sie nur, um Javascript auf der Clientseite auszulösen.

Das HolidayPartialView wird in html gerendert und der Jquery done-Callback fügt das html-Fragment in das refTable div ein.

Aktion "HolidayController Update"

[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);
}

Diese Controller-Aktion nimmt den Parameter "year" an und gibt eine Liste mit Datumsangaben unter Verwendung eines stark typisierten Ansichtsmodells anstelle des ViewBag zurück.

Modell ansehen

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>

Das ist das Zeug, das in dein Div eingefügt wird.

69
Jasen

Das Hauptkonzept der Teilansicht ist, den HTML-Code zurückzugeben, anstatt zur Teilansicht selbst zu gelangen.

[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);
}

diese Aktion gibt den HTML-Code der Teilansicht zurück ("HolidayPartialView").

Um die Teilansicht zu aktualisieren, ersetzen Sie das vorhandene Element durch das neue gefilterte Element.

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

Sie können stattdessen auch Url.Action für den Pfad verwenden: 

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