Reload only div in HTML page when refresh

Question

0.00/5 (No votes)

See more:

Hi, I have a html page in partial view using razor .NET. Currently I am doing whole partial view page refreshing every 5 minutes and it works fine. I plan to enhance it by reload only the div inside the html page without refreshing the whole html/partial view.
Is there any article or link that I can refer to? I know JavaScript has a .load() but it does not seems to be what I want(or have I missed out something on it?)

What I have tried:

Looked online for solution but none really hit my requirement.

Posted 10-Jul-16 22:50pm

Jamie888

Updated 10-Jul-16 23:18pm

Add a Solution

Comments

Suvendu Shekhar Giri 11-Jul-16 4:59am

check Ajax | jQuery API Documentation[^]

Jamie888 11-Jul-16 5:07am

Sir, I have looked into the link and the closest is the .load(). I have checked online again for the .load() and one thing I am not sure is can the .load() accept a function inside the JavaScript and take it as parameter? For example:
I have a function MyFunction(). Can I write like:
$( "#myDiv" ).load( "MyFunction() #myDiv" ); ?

As MyFunction() will returns many data from database, is it possible to do it?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

F-ES Sitecore · Answer 1 · 2016-07-10T23:18:00

Solution 1

main view

Razor

<script type="text/javascript">
    $(document).ready(function () {
        window.setInterval(updatePartial, 1000);
    });

    function updatePartial() {
        // the second param is an empty object {}, this is where you would pass
        // your param data, but if you leave the param off a GET is used and due
        // to chaching you won't see the page change, so I passed an empty object
        // to force a POST
        $("#p").load('@Url.Action("ShowPartial", "Home")', {});
    }
</script>
    <div id="m">Main view: @DateTime.Now</div>
    <div id="p">@Html.Partial("_myPartialView")</div>

</body>
</html>

partial view

Razor

Partial view: @DateTime.Now

controller

C#

public ActionResult ShowPartial()
{
    return PartialView("_myPartialView");
}

Here is an example for passing data to the partial view

Razor

<script type="text/javascript">
    $(document).ready(function () {
        window.setInterval(updatePartial, 1000);
    });

    function updatePartial() {
        $("#p").load('@Url.Action("ShowPartial", "Home")', {"ID":$("#dataID").val(), "Name":$("#dataName").val()});
    }
</script>
<div>
    ID <input type="number" id="dataID" value="1" /> Name <input type="text" id="dataName" value="John" />
</div>
<div id="m">Main view: @DateTime.Now</div>
<div id="p">@Html.Partial("_myPartialView", new TestModel{ID=1, Name="John"})</div>

Partial view

Razor

@model YourNamespace.Models.TestModel
Partial view: @DateTime.Now, model data: @Model.ID @Model.Name

Controller

C#

public ActionResult ShowPartial(TestModel model)
{
    return PartialView("_myPartialView", model);
}

Model

C#

public class TestModel
{
    public int ID { get; set; }
    public string Name { get; set; }
}

Posted 10-Jul-16 23:18pm

F-ES Sitecore

Updated 11-Jul-16 3:01am

v2

Comments

Karthik_Mahalingam 11-Jul-16 6:09am

5!

Jamie888 11-Jul-16 8:40am

Sir, I have few things I dont understand here and have searched online for some explantion. Please correct me if I am wrong, could I assume that the ShowPartial is the function name in my controller while the Home is the name of my controller file?
Besides, does the empty object {} will automatically recognize my previously used parameters and use it every time is refresh? As all of the codes above would be used for refreshing purposes. Thank you.

F-ES Sitecore 11-Jul-16 8:57am

Yes "Home" is the name of the controller. If you want to pass data to the view you'll need to pass the data via that second parameter of load. How this is done depends on what the data is, where it comes from etc, but I'll update the solution to include an example of passing data also.

Jamie888 11-Jul-16 21:59pm

Sir, if I have multiple boxes with their own unique ID, how should I place the data correctly for each of them? Should I use a for loop?

F-ES Sitecore 12-Jul-16 4:21am

It depends on the exact markup. You might just reference each ID explicitly, or if you could look then you could, or you could attach a "data" attribute to all the inputs you want to process and use a jquery selector to target all inputs with that data attribute. It really all depends on your specific situation.

Jamie888 12-Jul-16 2:32am

Sir, for the @Html.Partial("_myPartialView", new TestModel{ID=1, Name="John"}),
does the ID and also the Name is the output from the function call? If yes, can I put the ID and Name dynamically like ID = model.ID?

F-ES Sitecore 12-Jul-16 4:19am

They are just hard-coded values I used for ease, if you have that data in the model you'd do something more like

@Html.Partial("_myPartialView", new TestModel{ID=Model.ID, Name=Model.Name})

Jamie888 12-Jul-16 4:34am

Thank you. Another question is for example I have 2 div(myDiv1 and myDiv2) where the "1" and "2" are the unique id that I assigned to each of the myDiv in order to differentiate them. The controller will return 2 data of course, one for myDiv1 and one for myDiv2(both are coming from the same field in database, e.g. FirstName). Would I need to put the above codes @Html.Partial..... inside the foreach loop in my html page?

F-ES Sitecore 12-Jul-16 4:49am

You'd probably need to treat each div individually. So you'd have two partial views

<div id=div1>@Html.Partial( .. )</div>
<div id=div2>@Html.Partial( .. )</div>

Then your js would issue a .load for div1 passing the data for div1, then do a .load for div2 passing the data for div2. So you'd handle each div in turn rather than doing it all in one call.

Jamie888 12-Jul-16 4:59am

Sir, I have only one partial view in my html(e.g. myPartialView) in main html. Then by using javascript, I will return the whole data from controller using the code:
$("#myPartialView").html(data);
The tricky part is where inside the partial view html, I will loop the Model.Data1.Dtolist using foreach loop to plot all the data to their respective div(myDiv1 and myDiv2 in our case here). Therefore, during display in screen, my myPartialView would have 2 separate field(e.g. FirstName -> John and Sarah).
The myDiv1 and myDiv2 are coming from the same div tag. With only 1 and 2 are the unique id I am using to separate both like:
<div id="myDiv" + 1></div> and also <div id="myDiv" + 2></div>.

F-ES Sitecore 12-Jul-16 8:01am

In that case the partialview will do all the looping and create div1, div2 etc. You still need something to load the partial view into so you'll probably need to wrap your partial view in a div anyway

<div id=mypartial>
@Html.Partial...
</div>

The code in the partial view will create the divs so you'll end up with html like

<div id=mypartial>
<div id=div1>...</div>
<div id=div2>...</div>
</div>

So you'll do the ".load" on the "mypartial" div and that will re-create the inner divs.

Jamie888 12-Jul-16 22:58pm

Sir, I have tried your suggestion above but I am getting an error stating 'System.Web.Webpages.....does not contain a definition for Partial.....'. I have checked my web.config but found that I did not miss out any namespace as suggest by Internet solution like:
add namespace="System.Web.Mvc.Html"

Could I have missed out other namespace or configuration?

Jamie888 12-Jul-16 5:01am

How can I put like myDiv1 is John and myDiv2 is Sarah?