如何在mvc4中使用局部视图

时间:2014-12-30 11:23:22

标签: asp.net-mvc asp.net-mvc-4

我有一个文本框和一个提交按钮。我所要做的就是根据提供的日期获取记录,当收到请求时,我只想显示一个文本框和按钮。对于Post请求,我想检查与记录匹配的日期,并希望在同一视图中显示数据。怎么可能。我的观点是

@model IEnumerable<ShopOnline.Models.Order>


<script type="text/javascript">
$(function () {
    $("#Date").datepicker({dateFormat:"dd/mm/yy"});
});
</script>
@using(Html.BeginForm())   
{
<table>
<tr>
    <td>Enter Date</td>
    <td>@Html.TextBox("Date")</td>       
    <td><input type="submit" value="Submit" /></td>
</tr>
</table>
}
<table border="1">
<thead>
    <tr>
        <td>Order</td>
        <td>Product Name</td>
        <td>Quantity</td>
        <td>Amount</td>
        <td>Price</td>
        <td>Date</td>
    </tr>
</thead>
<tbody>
    @foreach(var item in Model)
    {
<tr>
    <td>Select Date</td>
    <td>@item.Order_Id</td>
    <td>@item.Product_Name</td>
    <td>@item.Quantity</td>
    <td>@item.Amount</td>
    <td>@item.Order_Date</td>
</tr>
    }
    </tbody>

这是控制器动作方法

 public ActionResult Admin()
    {
        return View(db.Orders.ToList());
    }
    [HttpPost]
    public ActionResult Admin(DateTime Date)
    {
        var record = db.Orders.Where(x => x.Order_Date ==Date).ToList();
        return View(record);
    }

现在问题是,如果我执行GET请求,我将显示所有记录,我只想在GET请求上显示文本框和按钮,而如果我执行POST请求,我想获取记录列表带有文本框和按钮的相同视图。那么部分视图可以在这里应用,它将如何工作

1 个答案:

答案 0 :(得分:0)

我的控制器代码,用于访问部分视图

public ActionResult ItemsPartialView()
{
    List<Item> inventoryDetails = new List<Item>();
    return PartialView("ItemsView", inventoryDetails);
}

我的Js

 $('#ItemView').on('click', function () {
    $.ajax({
            url: '@Url.Action("ItemsPartialView")',
            type: 'GET',
            success: function (result) {
                $('#ItemView').html(result);
            }
        });
    });

我的原始视图

<h4 > MY orginal View </h4>

<div id="ItemView">
    @Html.Partial("ItemsView", new Item())
</div>

部分视图:部分视图fileName是ItemsView

@model WebSite.Models.Item
@{
    ViewBag.Title = "ItemsView";
 }

<div>
   Hai this is my partial view
</div>