将数据从jQuery POST/GET到MVC 4控制器并返回View的最佳方式

本文关键字:返回 控制器 View 方式 最佳 MVC jQuery 数据 POST GET | 更新日期: 2023-09-27 18:26:00

因此,我有一个表,其中包含客户的信息,包括他们的姓名、电话、电子邮件等。这个单选按钮调用一个jQuery函数,该函数从控制器方法中获取客户的名称。我正在寻找将CustomerID和CustomerName传递给CustomerEvent控制器的正确和最佳方式,该控制器返回特定客户的事件视图。如果我尝试使用AJAX POST,它不会在data中返回View。我也试过window.location,但也不起作用。

这是剃须刀代码:

@Html.ActionLink("Events ", "../CustomerEvent/Index", null, new { id = "btnEventsCustomerID" })

jQuery:

jQuery('input[type=radio]').change(function () {
        jQuery('#hdnCustomerID').val($(this).val());            
        var CustomerID = jQuery('#hdnCustomerID').val();
        var CustomerName = null;
        $.ajax({
            url: '/Customer/GetCustomerName',
            data: { id: CustomerID },
            type: "GET",
            async: false,
            cache: false,
            success: function (data) {
                CustomerName = data
            }
        });
        alert(CustomerName);
        jQuery('#btnEventsCustomerID').click(function () {
            window.location = "/CustomerEvent/Index/?CustomerID=" + CustomerID + "&CustomerName=" + CustomerName;             
        });

CustomerName警报运行正常。以下是我返回客户事件视图的控制器方法:

public ActionResult Index(int CustomerID = 0, string CustomerName="")
    {            
        if (CustomerID != 0)
        {                
            Session["CustomerID"] = CustomerID;               
            Customer CustomerObj = _customer.GetCustomer(CustomerID);
            Session["CustomerName"] = CustomerObj.FirstName + " "+ CustomerObj.LastName;
        }
        return View(_customerEvent.GetCustomerEventCustomList(CustomerID));            
    } 

将数据从jQuery POST/GET到MVC 4控制器并返回View的最佳方式

为什么要发送CustomerName?看起来您没有在控制器方法中使用它,因为您在CustomerObj中键入了ID并获得了客户详细信息(包括名称)。如果可以的话,请简化并删除。。。

实际上,你有两种方法可以从同一个链接调用同一个控制器方法,一种是在操作链接中,它当前将null传递给该方法,另一种是jQuery中的.click()覆盖,它实际上试图传递方法参数,问题是,两者都是正面交锋的

由于您使用的是操作链接,因此实际传递路由值(最初为null的位置),然后进行修改,您应该可以继续(并取消jQuery点击覆盖,因为它看起来像是在有效地将用户移动到新视图):

    @Html.ActionLink("Events ", "../CustomerEvent/Index", 
         new{CustomerID = model.CustomerID}, new { id = "btnEventsCustomerID" })

只需相对于您在视图中引用模型数据的方式更改model.CustomerID

我面前没有编辑器,但我会试一试。听起来这里有几个不同的问题,所以我试着把它们都回答一遍。

要将customername存储在YD1m建议的数据属性中,您可以这样做:

@Html.ActionLink("Events ", "../CustomerEvent/Index", null, new { id = "btnEventsCustomerID, data_customer_name = "customernamehere" })

以下是有关数据属性的更多信息:http://ejohn.org/blog/html-5-data-attributes/

至于从CustomerEvent控制器中获取视图,我要做的是使用jQuery的"load"函数。我会先让你的动作返回一个PartialView(不是完全必要的,但我更喜欢准确地说)。然后,在您的客户端脚本中:

jQuery('input[type=radio]').change(function () {
    jQuery('#hdnCustomerID').val($(this).val());            
    var CustomerID = jQuery('#hdnCustomerID').val();
    var CustomerName = jQuery('#hdnCustomerID').attr('data-customer-name');
    $("#SOME_CONTAINER_FOR_THE_VIEW").load('/Customer/GetCustomerName?customerId=' + CustomerID + '&customerName=' + CustomerName, function(){ alert('done')});

关于jQuery的.load()函数的更多信息,请点击此处:http://api.jquery.com/load/