返回视图中的部分视图

Question

I have a view Index.cshtml :

@{
    ViewBag.Title = "Index";
}

<h2>Add</h2>

<p>Begin building a question set by clicking the button below.</p>
<input type="button" value="Create" onclick="location.href='@Url.Action("Product", "Add")'" />

Which calls the Product action within my AddController:

public ActionResult Product()
{
   ViewBag.Partial = true;
   return PartialView("Product");
}

What I'm trying to achieve is:

When a user loads the page the content from my partial view ( Product.cshtml ) is hidden, however when they click the "Create" button which calls the Product action in my AddController I want to then load the Product.cshtml partial view into my Index.cshtml so the latter still has its original content, but this time with the Product.cshtml injected into it.

At the moment, it's only returning the partial view and not both views.

Is this achievable in MVC?

Answer 1

Yes, basically what you need is to get your PartialView through AJAX call and load it into your page. Easiest to do with jQuery

You can do it with simple JavaScript.

In buttons onclick put name of your loading function, like onclick="partialLoad()"

Put div with some id on your page, like <div id="loadFrame"></div>

Then your script:

function parialLoad() {
    $("#loadFrame").load("/Product");
}

Answer 2

My suggestion would be the following.

Move your Products.cshtml to the Views/Shared/EditorTemplates or DisplayTemplates directory

Have a ViewModel that you populate that contains a list of Products that you pass to and from your view.

Thus:

HomeController.cs

public ActionResult Index()
{
    var model = new ProductViewModel();

    return View(model);
}

[HttpPost]
public ActionResult Index(ProductViewModel model)
{
    if (model == null)
    {
        model = new ProductViewModel();
    }
    if (model.Products == null)
    {
        model.Products = new List<Product>();
    }
    model.Products.Add(new Product { Name = "Some Product", Amount = model.Products.Count + 1});

    return View(model);
}

ProductViewModel.cs

public class ProductViewModel
{
    public List<Product> Products { get; set; }
}

Index.cshtml

@model DynamicViewExample.Controllers.ProductViewModel
@{
    ViewBag.Title = "About";
}

@using (Html.BeginForm())
{
    <h2>Add</h2>


    @Html.DisplayFor(m => m.Products)

    <p>Begin building a question set by clicking the button below.</p>
    <input type="submit" value="Add Product" />
}

And finally, the DisplayTemplate
Product.cshtml

@model DynamicViewExample.Models.Product
<div>
    @Html.HiddenFor(x => x.Name)
    @Html.HiddenFor(x => x.Amount)
    @Html.DisplayFor(x => x.Name)
    @Html.DisplayFor(x => x.Amount)
</div>

The reason I had to include the HiddenFor properties, was to enable the Products collection to populate otherwise you would get an empty collection all the time.

Again, this was a display template, that would return the following result

Add

Some Product 1
Some Product 2
Some Product 3
Some Product 4
Some Product 5
Begin building a question set by clicking the button below.

I hope this guides you into the direction you are wishing to go

Good Luck
Gawie Schneider