Anonymous
Anonymous

Reputation: 10216

ASP.NET WebMatrix After form post page reload Error?

I'm using ASP.NET Webmatrix and trying to load more data from SQL Database by Form Post request.

By default I have 2 Results and When I click the Load More Button each time the result increases by +2.

enter image description here

Everything is working fine. !But When I'm trying to reload my page, browser shows error.

enter image description here

Even if my form is already posted but browser is still showing for Resubmission error. How can I remove this error? Plz Help Me! & Here is my code:

**.cshtml**
@{
    var rowsNumb = 2;
    var db = Database.Open("Northwind");
    if (IsPost){
        rowsNumb = Request["lastRec"].AsInt() + 2;
    }else{}
    var maxRecs = db.QueryValue("SELECT COUNT([Product Id]) FROM Products");
    var sql = @"SELECT * FROM Products ORDER BY [Product Id] 
                OFFSET 0 ROWS FETCH NEXT @0 ROWS  ONLY";
    rowsNumb = (rowsNumb > maxRecs ? maxRecs : rowsNumb);
    var result = db.Query(sql, rowsNumb);
}
<!DOCTYPE html>
<html lang="en">
    <head>
    </head>
    <body>
        <table>
            @foreach(var row in result){
                <tr>
                    <td>@row["Product Name"]</td>
                    <td>@row["English Name"]</td>
                    <td>@row["Unit Price"]</td>
                </tr>
            }
        </table>
        <form method="post">
            <input type="hidden" name="lastRec" value="@rowsNumb"/>
            <button type="submit">Load More</button>
        </form>
    </body>
</html>

Upvotes: 1

Views: 565

Answers (2)

Naresh kumar Vanga
Naresh kumar Vanga

Reputation: 1

you can use the below code on the server side. This will refresh the page. Even you can change the refresh page timing.

Response.AppendHeader("refresh", "2");

Upvotes: 0

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

Its not Error

This is not an error in Browser, or your code. It is just the question by Browser when it wants to ask the user whether the user wants to load the page with the very same data that he passed on previous time. No error!

Reasons for this

That is because you're getting the data by submitting the form. So it behaves like you want to get the data againt that was achieved by passing on some data, like username etc. That is why it asks for this dialog.

<button type="submit">Load More</button>

The above button is the reason for this.

What you can do, is to use action and forward yourself to a new page where you will use the Response.Redirect() to the back page with an extra parameter, maybe a User Friendly like www.example.com/products?page=2. In the HTML you won't write the page = 2 or anything. But it would denote that the page is new and the page was not load using a POST request.

This way, you won't get the dialog again. Untill you use the submit button to load the content of the page, you will get this box.

A work around

There is another alternate way of doing this. Which is using jQuery (I know I know jQuery always is not the only function, but) and removing the type="submit" attribute. For example, the HTML would be

<button id="submit">Load More</button>

The jQuery to handle this code would be

$('#submit').click(function () {
   // either use ajax to load the content and add it, or
   // use window.location() to move to the next page and
   // come back to this page using Response.Redirect();
}

Response.Redirect method of ASP.NET

jQuery Ajax from jQuery API

Remove the if(IsPost) block

if (IsPost) { 
   rowsNumb = Request["lastRec"].AsInt() + 2;
   Response.Redirect("~/Default?v2");
}

This code block would only execute when there is a Header to denote the request was post (the request is post if the form submitted has method="post"). So using my idea won't work if you're having that block.

Remove the condition and execute it.

rowsNumb = Request["lastRec"].AsInt() + 2;
Response.Redirect("~/Default?v2");

Just this, this would update the variable by 2 and then provide the result again. POST would only execute if the request is made through form and has the method set to post. That is also the point where the error generates in your UI.

Entire code for you

@{
    var rowsNumb = 2;
    var db = Database.Open("Northwind");
    rowsNumb = Request["lastRec"].AsInt() + 2;
    // no need for else block since there is no code there
    var maxRecs = db.QueryValue("SELECT COUNT([Product Id]) FROM Products");
    var sql = @"SELECT * FROM Products ORDER BY [Product Id] 
            OFFSET 0 ROWS FETCH NEXT @0 ROWS  ONLY";
    rowsNumb = (rowsNumb > maxRecs ? maxRecs : rowsNumb);
    var result = db.Query(sql, rowsNumb);
}
<!DOCTYPE html>
<html lang="en">
    <head>
    </head>
    <body>
        <table>
            @foreach(var row in result){
                <tr>
                    <td>@row["Product Name"]</td>
                    <td>@row["English Name"]</td>
                    <td>@row["Unit Price"]</td>
                </tr>
            }
        </table>
        <a href="~/page?lastRec=@rowsNumb">Load More</a>
   </body>
</html>

If I had to write the code the above would have been the code it self. This code is all that you need. It would reload the page and would update the content and so on. Without using the POST request.

Upvotes: 2

Related Questions