How to incorporate another controller's view and behavior into "this" controller's view?

Question

I have a jQueryUI tabbed html page, and in its content area for one of the tabs, I have put as follows:

<div id="tabs-1ua">                           
    @RenderPage("~/Views/Admin/Create.cshtml")
</div>

The Create.cshtml page does correctly appear within my tab, however when I create the user (this view is a basic user creation page) and click the button, nothing happens. No user is created and no error is presented. The "this" html with the tabs is in a different controller which does not have any model associations. The user creation is inside the AdminController, pertinent methods shown below:

public ActionResult Create()
{
    return View();
}

 [HttpPost]
public async Task<ActionResult> Create(CreateModel model)
{
  if (ModelState.IsValid)
  {
    AppUser user = new AppUser { UserName = model.Name, Email = model.Email};
     IdentityResult result = await UserManager.CreateAsync(user,
                    model.Password);

     if (result.Succeeded)
        {
           return RedirectToAction("Index");
        }
     else
        {
            AddErrorsFromResult(result);
         }

    }
            return View(model);
}

I put a breakpoint at the beginning of the Post method, but it was never hit when I accessed the create page from within my other page.

When I access this page directly and create a user, I get the expected behavior for new creation and validation. The model is as follows:

  public class CreateModel
    {
        [Required]
        public string Name { get; set; }
        [Required]
        public string Email { get; set; }
        [Required]
        public string Password { get; set; }
    }

And the Create.cshtml view is as follows:

@model IdentityDevelopment.Models.CreateModel
@{ ViewBag.Title = "Create User";}
<h2>Create User</h2>
@Html.ValidationSummary(false)
@using (Html.BeginForm())
{
    <div class="form-group">
        <label>Name</label>
        @Html.TextBoxFor(x => x.Name, new { @class = "form-control" })
    </div>
    <div class="form-group">
        <label>Email</label>
        @Html.TextBoxFor(x => x.Email, new { @class = "form-control" })
    </div>
    <div class="form-group">
        <label>Password</label>
        @Html.PasswordFor(x => x.Password, new { @class = "form-control" })
    </div>
    <button type="submit" class="btn btn-primary">Create</button>
    @Html.ActionLink("Cancel", "Index", null, new { @class = "btn btn-default" })
}

My questions are, is it possible to do what I am trying to do? If so what changes do I need to make in order to reuse the existing available code?

Thank you.

score 1 · Accepted Answer · answered Jul 15 '16 at 18:50

1

You may explcitly specify which action method the form should post to when submit button is clicked.

You can use this overload of Html.BeginForm method to do so.

public static MvcForm BeginForm(
    this HtmlHelper htmlHelper,
    string actionName,
    string controllerName
)

So update your Create view.

@model IdentityDevelopment.Models.CreateModel
@using (Html.BeginForm("Create","Admin"))
{
   @Html.TextBoxFor(x => x.Name, new { @class = "form-control" })
   <button type="submit" class="btn btn-primary">Create</button>
}

Now nomatter where you include this view, it will always post to Admin/Create

answered Jul 15 '16 at 18:50

Shyju

214,206
104
411
497

Thanks, this worked. How can I change the `return View(model);` in the controller Create method so that it stays on the same page upon successful user creation? – ITWorker Jul 15 '16 at 19:25
You may do an [ajax form submit](http://stackoverflow.com/questions/10803292/how-to-send-data-in-jquery-post-to-mvc-controller-which-use-viewmodel-as-paramet) so that the page stays same. If you want a traditional submit, pass some identifier as a param to your partial view and have it in a hidden form element. In your Create action method check this value and return to that. – Shyju Jul 15 '16 at 19:28

score 0 · Answer 2 · answered Jul 15 '16 at 18:40

0

You should move your create form into a partial view which you can then render with RenderPartial. Then in your parent html page form do an ajax post to the partial views controller that defines the create method. Then you can use your partial anywhere you like with the logic centralized into the partial views controller.

answered Jul 15 '16 at 18:40

Paul Swetz

2,234
1
11
28

Is this approach different from the one posted by Shyju? – ITWorker Jul 15 '16 at 19:26
very similar to it yes. – Paul Swetz Jul 25 '16 at 12:21

How to incorporate another controller's view and behavior into "this" controller's view?

2 Answers2