Regular view -> partial view

Question

User1096912014 posted

Hi everybody,

I have a working view which was created as a regular view. However, I want to have an Ajax form and return that view after I click on the button in that form. What should I do to change my working view into a view I can return as part of another view?

Thanks in advance.

Answer 1

User493656174 posted

Regular view should be created as a partial view.

In the main view,

Create a placeholder to load the partial view contents on button click

<div id="TestDiv"></div>

On the click event of the button, make an ajax call to the controller action and its should return the partial view,

$('#testButton').click(function(){

//jquery ajax call to the controller action

success: function(data) {
$('#TestDiv').empty().html(data)

}

});

Alsocan try jquery get and jquery load

http://api.jquery.com/load/

Another option try setting new AjaxOptions { UpdateTargetId = "TestDiv" }) in Ajax.Begin Form

http://kitsula.com/Article/jQuery-Unobtrusive-Ajax-in-ASP.NET-MVC-3

Some more examples,

http://stackoverflow.com/questions/7352444/how-can-i-render-a-partial-page-on-click-a-html-button

http://stackoverflow.com/questions/11961374/partial-view-render-on-button-click

Answer 2

User1096912014 posted

Thanks, but somehow I can not make it to work - can you tell me what I need to change to fix it?

My main view:

@model CardNumbers.Objects.Client

@{
    ViewBag.Title = "Clients";
}

<h2>Clients</h2>

<br />

@using (Ajax.BeginForm("Search", "Client",
    new AjaxOptions
    {
        HttpMethod = "GET",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "ClientsResults"
      
    }))
    
{
    <fieldset>
        <legend>Search</legend>
        <label for="clientNo">Client No: </label>
        <input type="number" name="searchClientNo" class="numericOnly" /><br />
        <label for="clientName">Client Name: </label>
        <input type =  "text" size =25 data-autocomplete="@Url.Action("QuickSearch", "Client")"  name ="searchClientName" />
        <div>
            <input type="submit" value="Find / Refresh" />
        </div>
    </fieldset>
    
}

<br />
<div style="padding-left:150px; padding-top:50px; padding-bottom:50px;" id="ClientsResults">

</div>

and my partial _Clients view:

@model CardNumbers.Objects.Client

<div style="padding-left:150px; padding-top:50px; padding-bottom:50px;" id="ClientsResults">
<table id="flexClients" style="display:none">
</table>
</div>
<div style="display:none">
<form id="sform">
<input type="hidden" id="fntype" name="fntype">
<input type="hidden" id="Id" name="Id">
<label for="Number">Client No: </label>
<input type="number" id="Number" name="Number" class="numericOnly" />
<label for="Name">Client Name: </label>
<input type =  "text" size =25 id="Name" name ="Name" /><br />
<label for="Contact11">Contact 1: </label>
<input type =  "text" size =25 id="Contact1" name ="Contact1" /><br />
<div class="float-right">
<input type="button" value="Submit" onclick="addFormData();$('#flexClients').flexOptions({ url: '/Client/Client/'}).flexReload();clearAll();$('#sform').dialog('close');">
<input type="button" value="Cancel" onclick="clearAll();$('#sform').dialog('close');" /></div>
</form>
</div>

where code for #flexClients is defined in the CardNumbers.js file which is loaded in the Layout.cshtml

--------------------------

After I press Find/Refresh button I go to Search controller that has return PartialView('_Clients', clients),  but after that line nothing seems to execute and I don't see any changes in the resulting HTML.

What should I do to make it work?

Answer 3

User493656174 posted

Hi,

Add the code to render the partial view inside the div in the main view

<div style="padding-left:150px; padding-top:50px; padding-bottom:50px;" id="ClientsResults">
@Html.RenderPartial("PartialViewName",Model if exists);
</div>
Instead of this u can try using jquery to update the view rite

Answer 4

User1096912014 posted

I got the error here

Server Error in '/' Application.

---

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately. 

Compiler Error Message: CS1502: The best overloaded method match for 'System.Web.WebPages.WebPageExecutingBase.Write(System.Web.WebPages.HelperResult)' has some invalid arguments

Source Error:

Line 34: <br /> Line 35: <div style="padding-left:150px; padding-top:50px; padding-bottom:50px;" id="ClientsResults"> Line 36: @Html.RenderPartial("_Client") Line 37: </div>

Source File: c:\Dev\V40\CardNumbers\CardNumbers\Views\Client\Index.cshtml    Line: 36 

I am not sure how to pass the model correctly. In the Search code I am passing the clients result to the view (the Search does return PartialView("_Client", clients)

So, I am confused what do I need to do to make it work.

If in my _Layout.cshtml I call Client method directly (that returns the JSON data: return Json(flexgrid, JsonRequestBehavior.AllowGet);

all works OK. However, I don't want to return all clients. I want to be able to first filter them and then return some which are already filtered in the flex grid. This is what I can not make to work.

Answer 5

User1096912014 posted

If I change the above to 

@{Html.RenderPartial("_Client", Model); }

I have my view rendered, but it happens before the Search does anything and the search values are null. I want to only load that grid after I pressed the button with the info I used in that top form to limit the results.

Answer 6

User1096912014 posted

I am still not getting the desired result. I changed my main view to 

@model CardNumbers.Objects.Client

@{
    ViewBag.Title = "Clients";
}

<h2>Clients</h2>

<br />


    <fieldset>
        <legend>Search</legend>
        <label for="clientNo">Client No: </label>
        <input type="number" name="searchClientNo" class="numericOnly" /><br />
        <label for="clientName">Client Name: </label>
        <input type =  "text" size =25 data-autocomplete="@Url.Action("QuickSearch", "Client")"  name ="searchClientName" />
        <div>
  @*        @using (Ajax.BeginForm("Search", "Client",
    new AjaxOptions
    {
        HttpMethod = "GET",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "ClientsResults"
      
    }))
    
{
              *@
            <input type="button" value="Find / Refresh" id="ClientsSearch" data-url="@Url.Action("Client", "Client")" />
            @*}*@
        </div>
    </fieldset>
    


<br />
<div style="padding-left:150px; padding-top:50px; padding-bottom:50px;" id="ClientsResults">
@{Html.RenderPartial("_Client", Model); }
</div>

and I added the following code in my CardNumbers.js file

$(function () {
    $('#ClientsSearch').click(function () {
        $.ajax({
            url: $(this).data('url'),
            type: 'GET',
            cache: false,
            success: function (result) {
                $('#ClientsResults').html(result);
            }
        });
        return false;
    });
});

But still, it doesn't seem to work.

Answer 7

User493656174 posted

If you are trying to do using jquery, I think you dont have to mention ajax optons in ajax begin form. Update target id is not required since jquery ajax function has updates the content.

And also remove ,@{Html.RenderPartial("_Client", Model); } from div, since html is appened in jquery to the div.

<div style="padding-left:150px; padding-top:50px; padding-bottom:50px;" id="ClientsResults">

</div>
make sure jquery is returning the required result also ajax function is getting called upon button click.

Answer 8

User1096912014 posted

This is what I have now:

@model CardNumbers.Objects.Client

@{
    ViewBag.Title = "Clients";
}

<h2>Clients</h2>

<br />


    <fieldset>
        <legend>Search</legend>
        <label for="clientNo">Client No: </label>
        <input type="number" name="searchClientNo" class="numericOnly" /><br />
        <label for="clientName">Client Name: </label>
        <input type =  "text" size =25 data-autocomplete="@Url.Action("QuickSearch", "Client")"  name ="searchClientName" />
        <div>
  @*        @using (Ajax.BeginForm("Search", "Client",
    new AjaxOptions
    {
        HttpMethod = "GET",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "ClientsResults"
      
    }))
    
{
              *@
            <input type="button" value="Find / Refresh" id="ClientsSearch" data-url="@Url.Action("Client", "Client")" />
            @*}*@
        </div>
    </fieldset>
    


<br />
<div style="padding-left:150px; padding-top:50px; padding-bottom:50px;" id="ClientsResults">
@*@{Html.RenderPartial("_Client", Model); }*@
</div>

As you see, the call to RenderPartial is commented and the call to Ajax BeginForm also commented.

This is what I have in the CardNumbers.js file

$(function () {
    $('#ClientsSearch').click(function () {
        $.ajax({
            url: $(this).data('url'),
            type: 'GET',
            cache: false,
            success: function (result) {
                $('#ClientsResults').html(result);
            }
        });
        return false;
    });
});

When I run my application, I see nothing when I click on the Search button.

Answer 9

User1096912014 posted

I've tried everything I can think of to make it work. I believe there is no way to achieve functionality I want and the flex grid can not be used as  a partial view called from the main view :(