MVC 3 Razor的Master-Detail示例代码(详细信息请使用Ajax)

时间:2011-04-03 21:12:45

标签: ajax asp.net-mvc-3

我正在寻找使用c#mvc 3创建主/详细信息的示例代码。

具体来说,我试图弄清楚如何通过ajax调用局部视图的渲染。我可以将部分视图放在表单上,​​但是想要在用户通过ajax从选择列表中选择一个项目之后填充它。

THX

2 个答案:

答案 0 :(得分:13)

与往常一样,您从模型开始:

public class MyViewModel
{
    public int Id { get; set; }
    public string Title { get; set; }
}

public class DetailsViewModel
{
    public string Foo { get; set; }
    public string Bar { get; set; }
}

然后是控制器:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        // TODO: don't hardcode, fetch from repository
        var model = Enumerable.Range(1, 10).Select(x => new MyViewModel
        {
            Id = x,
            Title = "item " + x
        });
        return View(model);
    }

    public ActionResult Details(int id)
    {
        // TODO: don't hardcode, fetch from repository
        var model = new DetailsViewModel
        {
            Foo = "foo detail " + id,
            Bar = "bar detail " + id
        };
        return PartialView(model);
    }
}

和相应的观点。

~/Views/Home/Index.cshtml

@model IEnumerable<MyViewModel>

<ul>
    @Html.DisplayForModel()
</ul>

<div id="details"></div>

<script type="text/javascript">
    $(function () {
        $('.detailsLink').click(function () {
            $('#details').load(this.href);
            return false;
        });
    });
</script>

~/Views/Home/Details.cshtml

@model DetailsViewModel
@Model.Foo
@Model.Bar

~/Views/Home/DisplayTemplates/MyViewModel.cshtml

@model MyViewModel
<li>
    @Html.ActionLink(Model.Title, "details", new { id = Model.Id }, new { @class = "detailsLink" })
</li>

答案 1 :(得分:1)

我有blogged关于使用asp.net mvc创建主详细信息表单,您可以在clietn端添加n个子记录,而无需发送ajax请求只是为了记录子记录的编辑器字段。它使用了jquery模板