AbleCommerce Forums
»
AbleCommerce
»
General Questions
»
Widget - modify partial view after posting form
Rank: Member
Groups: Authorized User, Developers
Joined: 11/12/2018(UTC)
Posts: 25
Thanks: 1 times
Was thanked: 4 time(s) in 3 post(s)
|
As I've mentioned in previous posts, I'm an MVC newbie, so I hope this makes sense. I have a widget (partial view) that is working fine. Among other things, it has a button with type = button that changes the css display property of a table via an inline script, and a button with type = submit for calling the controller's HttpPost method. The controller code runs correctly when the submit button is clicked. I do not want it to leave the current page after submitting, and it doesn't. It uses a custom model I have created. The controller checks some things and if everything is OK, it writes a record to the database. I have the controller's post method returning the partial view, since that what the AbleCommerce widgets I looked at do if they don't go to another page: Code: [HttpPost]
public ActionResult MyWidgetDialog(MyModel model)
{
...
return PartialView("_MyWidgetDialog", model);
}
If everything is OK and the database is successfully updated, I'd like to re-display or reload the partial view after changing the css display property of a couple of html divs. However, based on testing and Google searches, it doesn't seem like returning the partial view like this actually lets you send data back to the partial view, or at least not in a way that can change what is being displayed. Doing some searches led me to try changing the controller method to just return a string in a ContentResult, then changing the submit button to a regular button and using a jQuery script to call that method (passing the model and receiving the string). I haven't been able to get that to work yet. It looks like I would need to convert the model data to a JSON string to do that - does that sound right? Plus, I don't think the model's data validation is done using a jQuery post instead of the normal submit. Can anyone give me some help on how to accomplish this?
|
|
|
|
|
|
Rank: Advanced Member
Groups: HelpDesk, Developers
Joined: 11/9/2018(UTC)
Posts: 564
Thanks: 122 times
Was thanked: 26 time(s) in 25 post(s)
|
You have a few options:
Use an Ajax.BeginForm() and set the target to a div tag that contains the content that needs refreshed. The button becomes just a submit button inside the ajax form. The action result called by the beginform() will return the same partial view and MVC will replace the contents of the specified div tag with the new partial view response html.
Or....
If the button must sit outside the form, make it a regular button with a click event to a javascript method. In the javascript, you make an ajax call to the actionresult which returns the partial view. In the Success: of the ajax call, you populate the div tag with the ajax response.
|
|
|
|
|
|
Rank: Advanced Member
Groups: Admin, Developers, Registered, HelpDesk, Authorized User
Joined: 10/5/2018(UTC)
Posts: 704
Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
|
Quote: I'd like to re-display or reload the partial view after changing the CSS display property of a couple of HTML divs. If you want to preset different display properties when returning from the POST method, you can create a property in the Custom Model class and then update the view HTML based on that property to set CSS display properties. I would also like to suggest Ajax beginForm to be used.
|
|
|
|
|
|
Rank: Member
Groups: Authorized User, Developers
Joined: 11/12/2018(UTC)
Posts: 25
Thanks: 1 times
Was thanked: 4 time(s) in 3 post(s)
|
Thanks for the suggestions. The view does already use Ajax.BeginForm. Here's the relevant razor code: Code:@model MyModel
<div id="myWidget">
<div class="login-form-wrapper">
@using (Ajax.BeginForm("MyDialog", new AjaxOptions() { UpdateTargetId = "myWidget", InsertionMode = InsertionMode.ReplaceWith, HttpMethod = "POST" }))
{
@Html.AntiForgeryToken()
<h3>Dialog Title Text</h3>
<div id="myFormDiv" class="dialogSection">
@* more code here for entering/displaying model fields, validation summary, etc. *@
</div>
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
<div id="submittedDiv" class="dialogSection inputForm" style=@ViewData["submittedDivDisplay"]>
<p>Your request has been submitted. We will send you an email when your account is ready.</p>
</div>
}
</div>
</div>
Using the VS debugger, I can see that when I click the Submit button my controller code for posting is executing all the way trough, including the "return PartialView(...);" statement, without error: Code:[AllowAnonymous]
[ValidateAntiForgeryToken]
[HandleAndLogError(typeof(HttpAntiForgeryException), Logger.LogMessageType.Debug)]
[HttpPost]
public ActionResult MyDialog(MyModel model)
{
ViewData["submittedDivDisplay"] = "display:none";
if (ModelState.IsValid)
{
// various other code
model.Save();
ViewData["submittedDivDisplay"] = "display:block";
}
return PartialView("_MyDialog", model);
}
However, in the browser, the http POST request is getting a "400 bad request" response. If I use a model property instead of ViewData to pass the string, I get the same thing. Nothing shows up in the AC error log or the Windows event log. I'm not sure how to figure out what is causing the "bad request" response. Edited by user Thursday, August 11, 2022 1:40:32 PM(UTC)
| Reason: razor code I orginally pasted in didn't have the submit button code
|
|
|
|
|
|
Rank: Advanced Member
Groups: Administrators, Developers, Registered, HelpDesk, Authorized User, Admin, System
Joined: 10/11/2018(UTC)
Posts: 110
Thanks: 19 times
Was thanked: 18 time(s) in 18 post(s)
|
I have tested your code and it is working as expected i.e. it shows the confirmation message on submit success. I am wondering if you have some error in your saving logic. Is the record saved in the database successfully?
|
|
|
|
|
|
Rank: Member
Groups: Authorized User, Developers
Joined: 11/12/2018(UTC)
Posts: 25
Thanks: 1 times
Was thanked: 4 time(s) in 3 post(s)
|
Thanks for testing Nadeem. Yes, the model record is saved correctly to the database. I guess I need to do some more debugging. I guess I should start with a very simple view and controller code, and if that works, then start adding the details back in until it stops working.
|
|
|
|
|
|
Rank: Advanced Member
Groups: HelpDesk, Developers
Joined: 11/9/2018(UTC)
Posts: 564
Thanks: 122 times
Was thanked: 26 time(s) in 25 post(s)
|
Sometimes jquery will mask a C# exception and the only error will be the browser console. It can sometimes help to fire up Fiddler, then hit your submit button and then check fiddler for an error HTTP response. If you see the error in fiddler, double click the error entry and view the raw response to the right. This will show you the actual error being thrown if there is one.
|
|
|
|
|
|
Rank: Member
Groups: Authorized User, Developers
Joined: 11/12/2018(UTC)
Posts: 25
Thanks: 1 times
Was thanked: 4 time(s) in 3 post(s)
|
I haven't used Fiddler before, but I installed it and it doesn't look there's anything more specific in the raw information: Code:POST http://[server]/Members/AccountRequestDialog/13 HTTP/1.1
Host: [server]
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:103.0) Gecko/20100101 Firefox/103.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
X-Requested-With: XMLHttpRequest
Content-Length: 31
Origin: http://[server]
Connection: keep-alive
Referer: http://[server]/Login?ReturnUrl=%2f
Cookie: AC9.ASPXANONYMOUS=7-y9AN5t2ToeT1y_A-KuAVL8fVfyWUrqxX38a9B_MPANGSwq5Zj2_zZqm87nVMdWKZX6gXE3L8JfPDkist3FvHj-J53MDr6weyBWqFBKv2vCNISAGuHDEtTI6LR-w9DoFxanrH-nV1TuWxggAjKVFQ2; AC9.SESSIONID=hb3yej4yoyjct2sira0srudr; __RequestVerificationToken=AReQbL2ST7P7joJqXbOKq9olVBdmqWIbamDknMiFoRQLqUIp8AY5z82WJuUXEkSzO7UEQsIM09IMkHdvHDSnv_zevmcSoRwhosjnuj-Pknw1
X-Requested-With=XMLHttpRequest
Code:HTTP/1.1 400 Bad Request
Cache-Control: private
Content-Type: text/html
Server: Microsoft-IIS/10.0
X-AspNetMvc-Version: 5.2
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
X-Frame-Options: SAMEORIGIN
Date: Thu, 11 Aug 2022 16:32:35 GMT
Content-Length: 11
Bad Request
|
|
|
|
|
|
Rank: Advanced Member
Groups: HelpDesk, Developers
Joined: 11/9/2018(UTC)
Posts: 564
Thanks: 122 times
Was thanked: 26 time(s) in 25 post(s)
|
Did you alter that content in your message? Because the url is showing http://[server]/Login?ReturnUrl=%2f and [server] isn't a valid url.
|
|
|
|
|
|
Rank: Member
Groups: Authorized User, Developers
Joined: 11/12/2018(UTC)
Posts: 25
Thanks: 1 times
Was thanked: 4 time(s) in 3 post(s)
|
Yes, for the forum post I replaced the actual server name with [server]. Probably being a little paranoid :).
|
|
|
|
|
|
Rank: Advanced Member
Groups: HelpDesk, Developers
Joined: 11/9/2018(UTC)
Posts: 564
Thanks: 122 times
Was thanked: 26 time(s) in 25 post(s)
|
lol ok, can't blame you :)
'Bad Request' is a tough one to nail down. Usually it means the postback url wasn't formed in a way that MVC could parse and interpret. Fiddler might or might not capture the button click.
Is this the button making your ajax call, or are you submitting the form?
|
|
|
|
|
|
Rank: Member
Groups: Authorized User, Developers
Joined: 11/12/2018(UTC)
Posts: 25
Thanks: 1 times
Was thanked: 4 time(s) in 3 post(s)
|
The button is making the call, within the partial view it is just: Code:<button type="submit" class="btn btn-primary btn-lg">Submit</button>
MVC is running the correct controller code, and as I mentioned before there aren't any errors when that code is executing, which is why it seems so strange that I'm getting the "bad request" response.
|
|
|
|
|
|
Rank: Advanced Member
Groups: HelpDesk, Developers
Joined: 11/9/2018(UTC)
Posts: 564
Thanks: 122 times
Was thanked: 26 time(s) in 25 post(s)
|
Could be something else is also trying to fire when the button is clicked. For example, Able has some script hooked to any button, on any shopper side page, that uses a specific css class. So no matter where that button is, or what else is hooked to that button, the additional Able code will also fire when that button is clicked if it uses that specific CSS. Drove me insane for months until I finally found it.
So if the correct controller is getting hit, and the view/partial being returned by the controller is rendering where it should....what's left to troubleshoot? Just that bad-request issue?
|
|
|
|
|
|
Rank: Member
Groups: Authorized User, Developers
Joined: 11/12/2018(UTC)
Posts: 25
Thanks: 1 times
Was thanked: 4 time(s) in 3 post(s)
|
The updated partial view (with a div that is now display:block instead of display:none) is not being received/rendered, only the "bad request" response is returned.
|
|
|
|
|
|
Rank: Member
Groups: Authorized User, Developers
Joined: 11/12/2018(UTC)
Posts: 25
Thanks: 1 times
Was thanked: 4 time(s) in 3 post(s)
|
It looks like this is happening when I am not logged in to the web site. I have the store's "Access Restrictions" setting set to "Registered Users Only". I have replaced AbleCommerce's RegisterDialog widget on the Login Inner Template with my widget. If I log in, then enter the Login path in the browser's address bar, or if I set the "Access Restrictions" setting to "None", clicking the Submit button in my widget works fine - my widget's div style changes from "display:none" to "display:block", and the text in that div becomes visible. There is no 400 error. Do I need to do something else besides putting the [AllowAnonymous] decoration on my controller's procedures in order for my widget's Submit button to work when no user is logged in and I'm using "Registered Users Only"? Code: [AllowAnonymous]
[RegisterWidget(DisplayName = "Simple Widget", IconUrl = "register_dialog.png", Category = CommerceBuilder.CMS.WidgetCategory.General, Description = "Simple widget to test changing div's class property when submit button clicked.")]
public ActionResult SimpleWidget()
{
var model = new SimpleModel();
ViewData["submittedDivDisplay"] = "display:none";
return PartialView("_SimpleWidget");
}
[AllowAnonymous]
[HttpPost]
public ActionResult SimpleWidget(SimpleModel model)
{
ViewData["submittedDivDisplay"] = "display:block";
return PartialView("_SimpleWidget");
}
|
|
|
|
|
|
Rank: Advanced Member
Groups: Administrators, Developers, Registered, HelpDesk, Authorized User, Admin, System
Joined: 10/11/2018(UTC)
Posts: 110
Thanks: 19 times
Was thanked: 18 time(s) in 18 post(s)
|
If you have the access restriction applied as "Registered Users Only", there is a link to configure unrestricted URLs "Configure Unrestricted URLs" (/Admin/Store/UnrestrictedUrls) just below the Access Restrictions dropdown. You can add URL that you want to allow anonymous access.
|
|
|
|
|
|
Rank: Member
Groups: Authorized User, Developers
Joined: 11/12/2018(UTC)
Posts: 25
Thanks: 1 times
Was thanked: 4 time(s) in 3 post(s)
|
Thanks Nadeem, I missed that somehow. As my father used to say, "If it was a snake it would have bit me!". I added "Simple/SimpleWidget" as an unrestricted URL, and it works now with my simple test widget. I'll put my actual model, controller, and view stuff back in there, rename it, change the URL to what I really want and verify that it works that way too (I'm sure it will).
|
|
|
|
|
|
AbleCommerce Forums
»
AbleCommerce
»
General Questions
»
Widget - modify partial view after posting form
Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.
Important Information:
The AbleCommerce Forums uses cookies. By continuing to browse this site, you are agreeing to our use of cookies.
More Details
Close
