Re-using a partial view (ascx) across different Controllers and Views

Question

Let's assume I have 2 Controllers, TopicsController and PostsController .

For each controller, I have a couple of views (Index & Details).

The Topic (Index) view inherits System.Web.Mvc.ViewPage<IEnumerable<MessageBoard.Models.Topic>>

The Topic (Details) view inherits System.Web.Mvc.ViewPage<MessageBoard.Models.TopicFormViewModel>
I'm using a TopicFormViewModel because I'm sending additional data along with the Model.

The Post (Details) view just inherits System.Web.Mvc.ViewPage<MessageBoard.Models.Post>

Now, I've created a partial view (CreatePost.ascx) which is (obviously :p) used to create a new Post. I want to be able to re-use this control on all of the views you see above.

Update
I've tried rendering the partial view using <% Html.RenderPartial("New"); %> <% Html.RenderPartial("New"); %> from my Topics/Index.aspx View, but that results in an exception

The model item passed into the dictionary is of type 'System.Data.Linq.Table`1[MessageBoard.Models.Topic]', but this dictionary requires a model item of type 'MessageBoard.Models.Post'.

Now the problem is that my partial view (CreatePost.ascx) accepts a System.Web.Mvc.ViewUserControl<MessageBoard.Models.Post> and I'm not sure how to pass that from all my views above.

I'm also unsure know how to submit the .ascx values to a certain URL (ie /Topics/1/CreatePost), how do I tell the submit button to post to that URL?

Thanks in advance,
Marko

Answer 1

Ciao Marko,

Now the problem is that my partial view (CreatePost.ascx) accepts a System.Web.Mvc.ViewUserControl and I'm not sure how to pass that from all my views above.

I am not sure I understand what do you mean by " how to pass that from all my views above " but I am sure that you dont have to pass an instance of Post from your views. What is going on is that from your views you will invoke a controller action that creates the Post model object and then bind it to the CreatePost.ascx partial.

I'm also unsure know how to submit the .ascx values to a certain URL (ie /Topics/1/CreatePost), how do I tell the submit button to post to that URL?

You have two options:

Inside your CreatePost.ascx partial you are probably using a form.

<% using (Html.BeginForm("action", "controller", FormMethod.Post, new {} )) { %>

If you use in the way I am showing you can change the first and the second params respectively to the names of the Action and the Controller that would habndle your submit.

The second option is using jQuery. Simply set an ID for your form and then

$("#myForm").submit(function(event) {
    //post an ajax request to the server
});

Hope this helps!

PS To be able to reuse your CreatePost.ascx partial place it inside the shared view folder (where your master page is).

Answer 2

关于重用不在同一个视图文件夹中的局部视图，请使用以下内容并传入所需的模型，或者您可以为其定义自定义路线。

<% html.RenderPartial("~/Views/<ControllerName>/<PartialViewName>.ascx", <model>);

Answer 3

@Marko

Another way would be to have in the PostController an Action like the following:

[HttpGet]
public ActionResult CreatePost( int topicId ) {
    PostModel pm = _manager.CreateDefaultPost();
    pm.TopicID = id;
    return PartialView( "CreatePost", pm );
}

Then wherever you want to create a Post you can simply call this action that returns the strong-typed view for your new post.

Even if you have a supplementary http call over the network IMO this solution has the advantage to keep the initialization code of a new Post centralized to a single place.

From the View "point-of-view" the call to the action can be done when the user press the "New Post" button and then inject the received markup inside a modal dialog or in a place of your pleasure in the current page.

Hope it helps!