c# - 无法在 C# MVC 中返回具有不同参数的 View() - Ajax 问题更新页面内容

标签 c# jquery ajax asp.net-mvc asp.net-mvc-4

基本上,我正在构建一个日历,人们可以在其中通过单击单元格并通过 Ajax 请求发送数据来添加他们的 session 。 这部分已经运行良好,但我不知道如何将正确的参数传递给 Index() View 。

编辑: 我现在的问题在于 Ajax 函数将结果返回到页面。我正在尝试在 jQuery Ajax 中执行与 MVC Ajax 选项 UpdateTargetId 等效的操作,但我想不出这样做的适当方法。

我当前的 Ajax 函数:

function AjaxAddRDV() {

    $.ajax({
        url: "/Agenda/AddRDV",
        async: "true",
        type: "GET",
        data: { "jour": rdvjour.val(), "mois": rdvmois.val(), "annee": rdvannee.val(), "text": rdvtext.val() },
        success: function (result) {

            $(".cal-container").html(result);  // This gives me the right result but my click events do not work anymore

            /*if (data && data.successUrl) {
                window.location.href = data.successUrl;
            }*/ this reloads the page, which I am trying to avoid
        }

    });
}

注意:我的 HTML 从 ViewModel 获取数据,并使用传递给模型的月份和年份创建一个表,给定正确的参数它永远不会失败。

public ActionResult Index(int annee = 0, int mois = 0)
{
        DateTime date = DateTime.Now;

        if (annee == 0) annee = date.Year;
        if (mois == 0) mois = date.Month;

        AgendaViewModel Agendata = CreateAgendaViewModel(annee, mois);

        if (dal.GetFirstDay(annee, mois) == 0)
        {
            return View("Error");
        }
        return View(Agendata);
}

当 Ajax 添加新约会时,将触发此方法: //我根据原始问题对其进行了编辑

   public ActionResult AddRDV(int jour, int mois, int annee, string text)
    {
        AgendaViewModel Agendata = new AgendaViewModel();
        if (!string.IsNullOrWhiteSpace(text))
        {
            dal.SetRdv(jour, mois, annee, text);
            Agendata = CreateAgendaViewModel(annee, mois);
        }
        return PartialView("Calendrier", Agendata);
    }

我要更新的 HTML 如下:

@model DASIWelcome.ViewModels.AgendaViewModel
 (...)
 <body>
    <div id="wrapper">
        <div id="prevmonth" class="switchmonth">←</div>
        <div class="cal-container">

            @Html.Partial("Calendrier",Model)
        </div>
        <div id="nextmonth" class="switchmonth">→</div>
    </div>
 </body>

我试图在每次发送 Ajax 请求时更新 @Html.Partial。

最终目标是拥有一个默认刷新当前月份日历的 Ajax 函数,如果月份发生变化,如果有新约会,它将返回带有自定义参数的相同日历添加等

我最近才开始使用 C# MVC,但我花了一整天的时间来解决这个问题,但我找不到一个不太丑陋且不推荐的解决方案...

任何帮助将不胜感激!

我尝试过的事情:

  • 使用参数构建第二个索引方法 - 加载失败说它有歧义
  • 找出首先调用索引的方法在操作之间进行 fork - 没有用 + 在我看到的所有地方都被认为是一个丑陋的解决方案
  • 哭泣

之前的问题已经解决,以下是我苦苦挣扎且不允许我继续前进的要点:

  • 点击功能不适用于动态创建的元素,因此每次加载页面时只能使用一次。
  • 起初我无法让 jQuery Ajax 函数以与 MVC Ajax UpdateTargetId 函数相同的方式刷新我的表。

这是我修复点击事件的方法:

$("#wrapper").on("click", ".week td", function(){

对于 on() 函数,我很难理解的是 第一个选择器 $("#wrapper") 必须是static,而 第二个选择器“.week td”是动态创建的元素的选择器。

因为我试图修复错误的东西,所以我设法找到了 MVC Ajax UpdateTargetId 和 jQuery Ajax 之间的等价物: jQuery:

$.ajax({
            url: "/Agenda/AddRDV",
            async: "true",
            type: "GET",
            data: { "jour": rdvjour.val(), "mois": rdvmois.val(), "annee": rdvannee.val(), "text": rdvtext.val() },
            success: function (result) {
                $("#cal-container").html(result);
            }
        });

MVC Ajax:

@using (Ajax.BeginForm("AddRDV", new AjaxOptions {
HttpMethod = "GET",
//InsertionMode = InsertionMode.Replace, 
UpdateTargetId = "cal-container",
OnComplete = "rdvdialog.dialog('close')"
}))
{
    <label for="rdvannee">Année</label>
    <label for="rdvmois">Mois</label>
    <label for="rdvjour">Jour</label>
    <br />
    <input type="text" name="annee" id="rdvannee" maxlength="4" size="4" />
    <input type="text" name="mois" id="rdvmois" maxlength="2" size="2" />
    <input type="text" name="jour" id="rdvjour" maxlength="2" size="2" />
    <br />
    <br />
    <label for="rdvtext">Titre</label><br />
    <input type="text" name="text" id="text" maxlength="250" />
    <input type="submit" name="Envoyer" value="Envoyer" />
}

特别感谢 dlght,他为我指明了正确的方向,并为我提供了一些有用的选择!

最佳答案

您的“ChangeMonth”方法与 Index 方法相同,但带有参数。当用户更改日历时,只需重新加载索引。我什至建议您制作一个函数来处理您的 ViewModel 创建,以便您如果需要,可以在其他 ActionMethods 中重用该模型:

public AgendaViewModel CreateAgendaViewModel(int annee, int mois)
{
            AgendaViewModel agendata = new AgendaViewModel();

            agendata.ListRDV = dal.GetListRDV(mois, annee); //Loads the list of appointments for the chosen month
            agendata.FirstDay = dal.GetFirstDay(annee, mois);
            agendata.MonthLength = dal.GetMonthLength(annee, mois);
            agendata.MonthName = dal.GetMonthName(mois) + " " + annee.ToString();
            agendata.Mois = mois;
            agendata.Annee = annee;

            return agendata;
}

public ActionResult Index(int annee = 0, int mois = 0)
{
        DateTime date = DateTime.Now;
        if(annee == 0) annee = date.Year; // if not set initialize with default year
        if(mois == 0)  mois = date.Month; // if not set initialize with default month

        AgendaViewModel Agendata = CreateAgendaViewModel(annee, mois);
        if (dal.GetFirstDay(annee, mois) == 0)
        {
            return View("Error");
        }
        return View(Agendata); 
    }

现在在 add 方法中,您可以重定向到具有所选月份和年份的索引:

public ActionResult AddRDV(int jour, int mois, int annee, string text)
{
        if (!string.IsNullOrWhiteSpace(text))
        {
            dal.SetRdv(jour, mois, annee, text);
        }
        return RedirectToAction("Index", new { annee = annee, mois = mois });
}

另一个注意事项 - 请用英文编写您的代码。如果您不仅为您自己而且为其他可能查看您的代码的人用英语命名您的参数和变量,您的代码将更具可读性。

希望这有帮助;]

编辑:

ajax函数重定向有两种方式: 1) 如果页面上没有其他功能,您可以通过成功传递带有 URL 路由的 Json 结果来重新加载整个页面:

public JsonResult AddRDV(int jour, int mois, int annee, string text)
{
        if (!string.IsNullOrWhiteSpace(text))
        {
            dal.SetRdv(jour, mois, annee, text);
        }
        var successUrl = Url.Action("Index", new { annee = annee, mois = mois });
        return Json(new {successUrl = successUrl});
}

Then in your ajax you do redirect to the index page:
$.ajax({ ...,
    success: function(data) {
        if(data && data.successUrl){
            window.location.href = data.successUrl;
        }
    }
});

2) 您可以更改您的逻辑,以便在页面内加载的部分 View 中创建日历。然后您可以通过调用重新加载日历包装器的 ajax 来重新加载部分 View - 您可以查看此 here 的示例

关于c# - 无法在 C# MVC 中返回具有不同参数的 View() - Ajax 问题更新页面内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32979537/

相关文章:

django - Django FileResponse Save 后停止旋转器

jquery - 如何使用jquery ui slider 创建分页效果并加载<DIV>中的内容?

c# - Web API 自托管公共(public) IP

c# - 在 Windows 应用商店应用程序的 TextBlock 和 PasswordBox 中垂直和水平居中文本

c# - WCF认证

c# - 在 htmlagilitypack 中使用代理

jquery - 如何在 html5 中使表格响应?

javascript - 从 json 响应函数处理到局部变量

javascript - 根据指定的数据属性隐藏元素

javascript - JQuery/Javascript - 遍历所有 json 元素之后并包括值