使用Ajax在ASP.Net MVC3剃刀渲染局部视图 [英] Rendering partial view in ASP.Net MVC3 Razor using Ajax

查看:145
本文介绍了使用Ajax在ASP.Net MVC3剃刀渲染局部视图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

的基本功能祝才达到的是,当选择一个DropDownList项的表的内容被更新。当用户一个新的选择,这将更新,并从数据库中获取新的信息和重新填充表。

The base functionality I wish to achive is that the contents of a table are updated when a dropdownlist item is selected. This will update when the user makes a new selection and retrieve new information from the database and repopulate the table.

另外值得一提的是,我想要的.change()的DropDownListFor与当作ajaxForm中不包含工作,但(另一种形式的承认)在其他地方出现在页面上。

It's also worth noting that the DropDownListFor that I want the .change() to work with is not contained within the AjaxForm but appears elsewhere on the page (admittedly in another form)

要做到这一点,我看了一下这个问题:<一href=\"http://stackoverflow.com/questions/8164328/rendering-partial-view-dynamically-in-asp-net-mvc3-razor-using-ajax-call-to-acti\">Rendering动态局部视图在ASP.Net MVC3剃须刀使用Ajax调用动作这确实要去部分是我想要做的方式做好。

To achieve this I looked at this question: Rendering partial view dynamically in ASP.Net MVC3 Razor using Ajax call to Action which does a good job of going part the way of what I want to do.

到目前为止,我有处理填充定制视图模型的局部视图控制器方法:

So far, I have a controller method which handles populating a customized viewmodel for the partial view:

    [HttpPost]
    public ActionResult CompanyBillingBandDetails(int id = 0)
    {
        var viewModel = new BillingGroupDetailsViewModel();
        var billingGroupBillingBands =
            _model.GetAllRecordsWhere<BillingGroupBillingBand>(x => x.BillingGroupId == id).ToList();

        foreach (var band in billingGroupBillingBands)
        {
            viewModel.BillingBands.Add(band.BillingBand);
        }

        return PartialView("BillingGroupDetailsPartial", viewModel);
    }

视图模型我想填充每个呼叫:

The ViewModel I wish to populate each call:

 public class BillingGroupDetailsViewModel
    {
        public List<BillingBand> BillingBands { get; set; }
    }

强类型的模型,我使用作为局部视图模型

The strongly typed model I'm using as a model for the partial view

public class BillingBandsObject
    {
        public int BillingBandId { get; set; }
        public int RangeFrom { get; set; }
        public int RangeTo { get; set; }
        public Decimal Charge { get; set; }
        public int BillingTypeId { get; set; }
        public bool Delete { get; set; }
    }

局部视图它将填充和回报:

The partial view it populates and returns:

@model xxx.xxx.DTO.Objects.BillingBandsObject


<tr>
    <td>
        @Html.DisplayTextFor(x => x.RangeFrom)
    </td>
</tr>
<tr>
    <td>
        @Html.DisplayTextFor(x => x.RangeTo)
    </td>
</tr>
<tr>
    <td>
        @Html.DisplayTextFor(x => x.Charge)
    </td>
</tr>

剃刀code为页面的这一部分:

The Razor code for this section of the page:

    <table>
        <thead>
           <tr>
               <th>
                  Range From
               </th>
               <th>
                  Range To
               </th>
               <th>
                  Charge
               </th>
           </tr>
        </thead>
    <tbody>

    @using (Ajax.BeginForm("CompanyBillingBandDetails", new AjaxOptions() { UpdateTargetId = "details", id = "ajaxform" }))
    {
    <div id="details">
        @Html.Action("CompanyBillingBandDetails", new { id = 1 })
    </div>
    }

    </tbody>
 </table>

最后我解除几乎直接从达林的回答功能:

and finally the function I lifted almost straight from Darin's answer:

$(function () {
        $('#billinggrouplist').change(function () {
            // This event will be triggered when the dropdown list selection changes

            // We start by fetching the form element. Note that if you have
            // multiple forms on the page it would be better to provide it
            // an unique id in the Ajax.BeginForm helper and then use id selector:
            var form = $('#ajaxform');

            // finally we send the AJAX request:
            $.ajax({
                url: form.attr('action'),
                type: form.attr('method'),
                data: form.serialize(),
                success: function (result) {
                    // The AJAX request succeeded and the result variable
                    // will contain the partial HTML returned by the action
                    // we inject it into the div:
                    $('#details').html(result);
                }
            });
        });
    });

目前我已经通过了一些错误战斗的那一刻,我目前面临的:

At the moment I have fought through a number of errors, currently I am faced with :

错误执行的处理程序System.Web.Mvc.HttpHandlerUtil + ServerExecuteHttpHandlerAsyncWrapper孩子的请求。

"Error executing child request for handler 'System.Web.Mvc.HttpHandlerUtil+ServerExecuteHttpHandlerAsyncWrapper'."

不过,我觉得可能缺乏我的问题作为一个整体的了解。

However, i feel my understanding of the problem as a whole may be lacking.

任何帮助AP preciated!

Any help appreciated!

推荐答案

此错误意味着,有一个例外,在渲染你的孩子视图。可能是一些相关的数据,IE浏览器。 的NullReferenceException

This error means that there was an exception while rendering your child view. Probably something related to your data, ie. NulLReferenceException.

只是附加调试器并设置为打破时抛出一个异常。

Just attach your debugger and set to to break when an exception is thrown.

这篇关于使用Ajax在ASP.Net MVC3剃刀渲染局部视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆