Question

i wish to change the inner html of a view on button click but maintain the view. I know how to change the html content of a div in javascript, but how can I have the action of the button not return a different view?

My buton looks like

<input type="submit" value="submit" onchange="myfunc()"/>

where myfunc() is the function in Javascript changing the div content.

Answer 1

Assuming you want a link to render content using ajax (and hopefully using razor) you can do something like the following:

First, setup the action to render the content partially. this can be done a few ways, but I’ll keep with the logic in the action (and make it callable directly or by ajax):

[HttpPost]
public ActionResult Save(SomeModel model)
{
  /* build view */
  return Request.IsAjaxRequest() ? PartialView(model) : Wiew(model);
}

Next, setup a container in your page where the content will be populated along with the form you’re looking to submit. If you want the form to disappear on a save, wrap it in the container. Otherwise, keep the container separated. In the below example, the from will submit and on success it’ll come back, otherwise the new content will appear in its place:

<div id="ajaxContentPlaceholder">
  @using (Ajax.BeginForm("Save", new AjaxOptions { UpdateTargetId = "ajaxContentPlaceholder" })) {
      <!-- form elements -->
      <input type="submit" value="save" />
  }
</div>