Views overlapping in MVC application

Question

I have been stuck with this issue for sometime now. Can someone help me solve this bug.

Before I submit the form the following UI gets displayed. However, Upon clicking on the Register button, I am supposed to be redirected to another page. But, the VIew I get is an overlapped version of the previous view (Look screen shot below)

After submitting the registration view the page gets displayed as follows: (You'll be able to see part of the previous screen also embedded to this view which is not the expected result)v- Expected result will be to display ProfileOption and the Copyright mark on the page.

Code:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Register(RegisterViewModel acount)
{
    return RedirectToAction("ProfileOption", "Acc");
}

[HttpGet]
public ActionResult ProfileOption()
{
    return View("ProfileOption");
}

AJAX USED IN THE FRONT END

function submitdata() {
    $('form').click(function() {
        if (!$(this).valid()) {
            return;
        }    
        var token = $('[name=__RequestVerificationToken]').val();
        $.ajax({
            url: '@Url.Action("Register", "Acc")', 
            type: 'POST',
            data: {
                EMAIL: 'email@ss.ss',
                PASSWORD: $('#pword').val(),
                ConfirmPassword: $('#cpwd').val(),
                __RequestVerificationToken: token
            },
            success: function (result) {

            }
        });
        return false; 
    });
}

@AnkushJain Yes. The values are passed from the front end to the controller via Ajax. — Illep, Dec 22 '16 at 09:19
Show your login view code. Have you expect showing `ProfileOption` filling entire page as redirection result (removing login form part) or just a partial view? — Tetsuya Yamamoto, Dec 22 '16 at 09:23
why you are using AJAX to show different page. you can directly submit your form and then redirect to action you want. — Jaimin Dave, Dec 22 '16 at 09:24
I am not using Ajax to show different pages. All redirection hapens from the Controller. In the registration page, I passed the email and the password from the HTML to the Controller using Ajax. — Illep, Dec 22 '16 at 09:27
You cannot redirect using ajax (the whole point of ajax is to stay on the same page). If you want to redirect, then make a normal submit — , Dec 22 '16 at 09:28
AJAX callback often used to display other content on the same page, using `Html.BeginForm` is more preferred to perform submit and redirect to another page with `target=parent`. — Tetsuya Yamamoto, Dec 22 '16 at 09:30
I am not using AJAX to navigate from page to page. I am only using it to pass parameters to the server as shown in the above code snippet. — Illep, Dec 22 '16 at 09:32
Again, then whole point of making an ajax call id to **stay on the SAME page**. Delete you script - its pointless — , Dec 22 '16 at 09:33
then why you have written return RedirectToAction("ProfileOption", "Acc"); in your post action — Jaimin Dave, Dec 22 '16 at 09:34
Stephen is correct. The controller can not redirect to another page. It can return a view/partial view which you can the past in to you view. If you want to redirect then you need to redirect client side in the "success" function of your AJAX call — KevDevMan, Dec 22 '16 at 09:35

score 0 · Answer 1 · edited May 23 '17 at 11:59

0

Return Json instead of View from Register action:

 [HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Register(RegisterViewModel acount)
{
    return Json(new { Success = true, RedirectUrl = "Url"});
}

jQuery

$.ajax({
  url: "any url",
  dataType: '',
  contentType: "------",
  success: function(response){
    if(response.Success){
      window.location.href = response.RedirectUrl;
    }
  }
});

or check my answer here

Redirect to action with JsonResult

edited May 23 '17 at 11:59

Community

1
1

answered Dec 22 '16 at 09:20

Ankush Jain

5,654
4
32
57

Still the same. – Illep Dec 22 '16 at 09:26
I have added the Ajax part of the Registration page. – Illep Dec 22 '16 at 09:30
It is pointless (and just degrading performance) to make an ajax call, return data back to the client, then throw it all away and make a redirect – Dec 22 '16 at 09:36
@StephenMuecke If so what will be the correct approach of doing so ? I am a newbie – Illep Dec 22 '16 at 09:41
Again, I agree with Stephen again here. you should not be using AJAX for this task. If your end goal is to navigate to another page you should do a page submit. – KevDevMan Dec 22 '16 at 09:41
@Illep. Just make a normal submit (using a form and a submit button). And it also allows to you return the current view if `ModelState` is invalid (by using `return View(model);`) and display validation errors so the data can be corrected (you cannot rely on client side validation - its a nice bonus but easily bypassed) – Dec 22 '16 at 09:44
I need to send some values to the controller that I am not retrieiving from the user. So that was Why I am sending it from a AJAX method. If I am to use FORM how can I pass hidden values (Which I have not asked the user to input) to the Controller ? – Illep Dec 22 '16 at 09:46
@Illep, What do you mean? The only 'hardcoded' value is `'email@ss.ss',` and that should not even be in your view. Do not expose unnecessary data to potentially malicious users. You already know what it is in the controller so there is no reason for the client to send it in the request. – Dec 22 '16 at 09:52

score 0 · Answer 2 · answered Dec 22 '16 at 09:38

You can not go to another view using AJAX. you can only render the HTML result in the current view.

To navigate to another view you need to do something like

function submitdata() {
    $('form').click(function() {
        if (!$(this).valid()) {
            return;
        }    
        var token = $('[name=__RequestVerificationToken]').val();
        $.ajax({
            url: '@Url.Action("Register", "Acc")', 
            type: 'POST',
            data: {
                EMAIL: 'email@ss.ss',
                PASSWORD: $('#pword').val(),
                ConfirmPassword: $('#cpwd').val(),
                __RequestVerificationToken: token
            },
            success: function (result) {
                window.location.href = "http://stackoverflow.com";
            }
        });
        return false; 
    });
}

Views overlapping in MVC application

2 Answers2