ASP.NET MVC - 如何在发布数据后重新加载相同的视图?

时间:2015-04-16 12:26:04

标签: forms asp.net-mvc-5 postback

我有一个包含Google地图的视图,其中包含默认缩放级别和国家/地区设置的位置。在地图上显示的默认位置来自数据库,我所做的是我有[HttpGet]索引操作获取此信息,将其发送到视图,然后在视图中我使用JS绘制地图(只是通常谷歌地图的东西绘制一个简单的地图)。

然后在地图div上方,我显示了一个文本框和一个搜索按钮。因此,用户键入地址并按下搜索按钮,我将文本框的值发布到[HttpPost]索引操作。现在我想将此值传递给[HttpGet] Index操作,以便它从DB获取该地址的数据,将其发送到Index视图,以便重新绘制地图,并将该特定地址设置为地图的中心,也显示文本框中的地址。

有关如何执行此操作的任何建议?

我尝试过的方式(它没有工作)是调用Index动作的Get版本并使用TempData字典将地址传递给它。但我所看到的只是一个空白页面。

以下是我的HttpGet Index操作的外观:

[HttpGet]
public async Task<ActionResult> Index()
{
    // I fetch the info from DB here put it inside ViewBag and call the view    
            return View();
}

这会正确加载信息,并在浏览器中第一次点击URL控制器/索引时绘制地图。

文本框和搜索按钮的标记为:

<form class="form" id="searchForm" action="@Url.Action("Index", "Default")" method="post">
<div class="form-group">
    <div class="row">
        <div class="col-xs-9 col-sm-9 col-md-10">
           <label for="address" class="sr-only">Search for address</label>
           <input type="text" class="form-control" id="address" placeholder="Search for address" name="address">
         </div>
    <div class="col-xs-3 col-sm-3 col-md-2">
    <input type="submit" class="btn btn-block btn-success" value="Search" />
    </div>
   </div>
</div>
</form>

最后是HttpPost Index操作:

[HttpPost]
public void Index(String address)
{
   TempData["address"] = address;
   Index();
}

因此,当我提交表单时,我希望它被发布到HttpPost Index操作,然后它将值传递给它的HttpGet版本,最终将从DB获取数据并使用更新的地图获取视图。但我所看到的只是一个空白页面。

任何帮助?

2 个答案:

答案 0 :(得分:9)

像那样

[HttpPost]
public void Index(String address)
{
   TempData["address"] = address;
   RedirectToAction("Index");
}

你看到它是空白的,因为你正在重定向RedirectToAction("Index");并将数据存储在TempData中而你没有在索引中使用它Get方法

[HttpGet]
public async Task<ActionResult> Index()
{
    // I fetch the info from DB here put it inside ViewBag and call the view   
    // you must check for the temp data
    if (!string.IsNullOrWhiteSpace(TempData["address"].ToString()))
    {
         ViewBag["result"] = TempData["address"];
         //and use you viewbag data in the view
    }
    return View();
}

答案 1 :(得分:2)

我告诉过你的机制......

如果我有一个地址实体

public class Address
{
    public int Id { get; set; }
    public string Street { get; set; }
    public string House { get; set; }
    public int Floor { get; set; }
}

这是控制器操作AddressController

    [HttpGet]
    public ActionResult Index()
    {
        var model = new SearchAddressesViewModel();

        // you can here also fetch all the addresses in your db ... 
        //but this is not a good approach also, but if you need to do that it's easy

        // fetch data base and get all addresses
        //model.AddressesFound = db.Addresses.Select(a => new AddressModel
        //{
        //    Street = a.Street,
        //    House = a.House,
        //    Floor = a.Floor
        //}).ToList();

        return View(model);
    }

    [HttpPost]
    public ActionResult Index(SearchAddressesViewModel model)
    {
        if (!ModelState.IsValid)
            return View(model);

        // fetch data base and get addresses based on the search criteria in 
        //model.SearchCriteria
        // for example:
        //var addresses = db.Addresses.Where(a => a.Street == model.SearchCriteria);

        //add found addresses to model

        //model.AddressesFound = addresses.Select(a => new AddressModel
        //{
        //    Street = a.Street,
        //    House = a.House,
        //    Floor = a.Floor
        //}).ToList();

        return View(model);
    }

这是我的观看Index.cshtml

@model SearchAddressesViewModel

@using (Html.BeginForm("Index", "Address", FormMethod.Post)){
    @Html.LabelFor(m => m.SearchCriteria);
    @Html.TextBoxFor(x=>x.SearchCriteria);
    @Html.ValidationMessageFor(m => m.SearchCriteria, "");

    <br />
    <input type="submit" class="btn btn-block btn-success" value="Search" />
}

@if(Model.AddressesFound!=null)
{
    <table>
        <thead>
            <tr>
                <th>Street</th>
                <th>House</th>
                <th>Floor</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.AddressesFound)
            {
                <tr>
                    <td>@item.Street</td>
                    <td>@item.House</td>
                    <td>@item.Floor</td>
                </tr>
            }
        </tbody>
    </table>
}

这里是我使用SearchAddressesViewModelAddressModel

的视图模型
public class SearchAddressesViewModel
{
    [Required]
    [Display(Name = "Search for address")]
    public string SearchCriteria { get; set; }

    public IList<AddressModel> AddressesFound { get; set; }
}

public class AddressModel
{
    public string Street { get; set; }
    public string House { get; set; }
    public int Floor { get; set; }
}

您也可以根据自己的情况在视图中使用AddressModel的部分视图。

我希望你明白我的意思......谢谢