Using Partial views for file uploading

Question

I have always experienced this problem whenever I tried to work with partial views. I have an partial view that has some contents as follows:

_DocumentsPartial.cshtml
<div>
    <input type="text" name="txtDocType" />
    <input type="file" name="file_Uploader" />
</div>
<input type="submit" id="btnSaveDocument" />

and then I have a viewPage that is main page which is using that partial view::

ViewPage
   <div id="tabs-6">
            @*  *@
            @using (@Html.BeginForm("SaveDocumentFile", "PatientTab", FormMethod.Post, new { @id = "form1", @enctype = "multipart/form-data", @target = "iframeID" }))
            {
                Html.RenderAction("_DocumentPartial");
            }
            <iframe id="iframeID" name="myIFrame"></iframe>
        </div>

I am able to open partial view in the main page successfully. But After I click on submit button which is in partial view, It returns me partialview in the new tab whereas it should maintain the same state ie. page should be the same. But actually, it opens the content of partial view in a new tab of browser as follows::

http://localhost:6695/PatientTab/SaveDocumentFile

Which is not correct.

My controller code is as follows::

  public ActionResult _DocumentPartial()
        {
            return PartialView("../Shared/Partial/_DocumentPartial");
        }

        public ActionResult SaveDocumentFile(HttpPostedFileBase file_Uploader, string txtDocType)
        {
            return PartialView("../Shared/Partial/_DocumentPartial");
        }

score 0 · Answer 1 · edited Feb 25 '14 at 07:16

This is typical confusion. What you want is loading partial view dynamically, I.e. by using ajax. For this either add onclick handler to your button and load it like this: http://www.c-sharpcorner.com/UploadFile/d551d3/how-to-load-partial-views-in-Asp-Net-mvc-using-jquery-ajax/ Or use unobtrustive ajax:

@Ajax.ActionLink(
    "load partial view", 
    "Load", 
    "Home", 
    new AjaxOptions { UpdateTargetId = "result" }
)

score 0 · Answer 2 · answered Feb 25 '14 at 07:15

0

This is because this code PartialView("../Shared/Partial/_DocumentPartial") returns a partial view and after form submit it is supposed to be redirected to this view only. Not the parent view containing your partial view.

If you want to redirect to the parent view you need to use

return RedirectToAction("Your parent view Name");.

answered Feb 25 '14 at 07:15

Rajesh Dhiman

1,888
1
17
30

but I do not want a whole post back of the form. I just need that partial view to load again. Is this possible? – Sweetie Feb 25 '14 at 07:18
1

then you have to make ajax request – Akhlesh Feb 25 '14 at 07:20
you mean to say "@Ajax.ActionLink()"? – Sweetie Feb 25 '14 at 07:24
Can be done using a simple `ajax request` instead of doing a `submit` on button click from your partial view and replace your partial view container with the ajax result on success. – Rajesh Dhiman Feb 25 '14 at 07:31
an example or fiddle would be better if you can. – Sweetie Feb 25 '14 at 07:42
I think [This](http://stackoverflow.com/questions/5410055/using-ajax-beginform-with-asp-net-mvc-3-razor) can help you for that. – Rajesh Dhiman Feb 25 '14 at 08:08

Using Partial views for file uploading

2 Answers2