We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

submit button in template just reloads the form

Thread ID:

Created:

Updated:

Platform:

Replies:

149710 Dec 6,2019 08:14 AM UTC Mar 11,2020 07:20 AM UTC ASP.NET Core - EJ 2 7
loading
Tags: DataGrid
John Stephen Mangam
Asked On December 6, 2019 08:14 AM UTC


Earlier it was working, but after updating the nuget package to current version, it doesn't got to area/controller/new-action but reloads the current page.

Row Template:

 <form id="verifyform${Id}" name="VerificationForm" method="post">
                    <button name="compilationId" value="${Id}" asp-area="xxx" asp-controller="xxx" asp-action="Edit"
                            class="btn-primary" type="submit">
                        Edit
                    </button>
                </form>

Gets rendered as:


<td class="details"><div><form id="verifyformbd6dc68c-12a1-49d0-9e7c-021f238cb57f" name="VerificationForm" method="post"><button name="xid" value="bd6dc68c-12a1-49d0-9e7c-021f238cb57f" asp-area="xxx" asp-controller="xxx" asp-action="Edit" class="btn-primary" type="submit">Edit</button></form></div></td>

Pavithra Subramaniyam [Syncfusion]
Replied On December 9, 2019 11:44 AM UTC

Hi John, 
 
Thanks for contacting Syncfusion support. 
 
By default, when use form with submit button then it automatically reload the page. If you want to prevent reloading current page in form submit(you can apply return false on submit or bind click event and apply preventDefault for event arguments) then refer the below link, 
 
 
If we misunderstood or still face the problem then share more or below details that will helpful for us to validate further at our end. 
 
  • Share old & new NuGet version that you are used in your application.
  • Did you refer grid source(packages) using CDN or local file ? share that grid package version.
  • Share the full code example to analyze further.
 
Regards, 
Pavithra S. 


John Stephen Mangam
Replied On December 9, 2019 12:07 PM UTC

Thank you. If not submit button, whatbelsebcan use to navigate to an action from a controller in another area?

Pavithra Subramaniyam [Syncfusion]
Replied On December 10, 2019 10:23 AM UTC

Hi John, 
 
Thanks for your update. 
 
Query: what else can use to navigate to an action from a controller in another area? 
 
While rendering row template in script tag then it does not serialize/convert tag helper to Html so we suggest you to give corresponding HTML code inside row template to achieve your requirement. 
 
<script id="rowtemplate" type="text/x-template"> 
    <tr> 
        <td class="photo">  // you can convert and apply the corresponding HTML code here 
                <form id="verifyform${OrderID}" name="VerificationForm" method="post"> 
                    <button name="compilationId" value="${OrderID}" class="btn-primary" type="submit" formaction="/Home/About?area=xxx"> 
                        Edit 
                    </button> 
                </form> 
        </td> 
    </tr> 
</script> 
 
Regards, 
Pavithra S. 


John Stephen Mangam
Replied On March 7, 2020 01:28 PM UTC

Hi,

You suggested to use formaction earlier, now it no longer hits the action code :

Error when I click the button: 

No webpage was found for the web address: https://localhost:44358/File/ViewFile?area=Officer

My code is:

<script id="rowTemplate" type="text/x-template">
    <tr>
  <td class="details">
            <div>
                <form id="viewform${Id}" name="ViewForm" method="post">
                    <button name="fileId" value="${Id}" 
                            formaction="/File/ViewFile?area=Officer" 
                            type="submit"
                            class="btn-primary">
                        View
                    </button>
                </form>
            </div>
        </td>
...

// Doesn't hit this at all

 [Area("Officer")]
FileController.cs
  [HttpPost]
        public ActionResult ViewFile(string fileId)
        { 
            var file= new FileViewModel { FileId = fileId };
            return View(file);
        }

Rendered HTML:

<td class="details"><div><form id="viewform5bec1029-cd9a-409e-bb75-05fce83a5e20" name="ViewForm" method="post">
<button name="fileId" value="5bec1029-cd9a-409e-bb75-05fce83a5e20" formaction="/File/ViewFile?area=Officer" type="submit" class="btn-primary">View</button>
</form></div></td>

John Stephen Mangam
Replied On March 7, 2020 01:36 PM UTC

I'm using asp.net core 3.1  and latest version of syncfusion

app.UseEndpoints(routes =>
            {                        
                routes.MapAreaControllerRoute(
                    "Officer",
                    "Officer",
                    "Officer/{controller=Home}/{action=Index}/{id?}");
                routes.MapDefaultControllerRoute();
            });

John Stephen Mangam
Replied On March 11, 2020 07:18 AM UTC

I'm using asp.net core 3.1  and latest version of syncfusion

app.UseEndpoints(routes =>
            {                        
                routes.MapAreaControllerRoute(
                    "Officer",
                    "Officer",
                    "Officer/{controller=Home}/{action=Index}/{id?}");
                routes.MapDefaultControllerRoute();
            });

I would appreciate a response on this issue.

Thank you.
John

Manivel Sellamuthu [Syncfusion]
Replied On March 11, 2020 07:20 AM UTC

Hi John, 

Thanks for your update. 

You can navigate the form action to the required controller as like the below code example. Please refer the below code example. 

 
<ejs-grid id="Grid" rowTemplate="#rowtemplate" width="600px" allowPaging="true"> 
. . . 
 
<script id="rowtemplate" type="text/x-template"> 
    <tr style="border: 2px dotted"> 
        <td class="details"> 
            <div> 
                <form id="viewform${OrderID}" name="ViewForm" method="post"> 
. . . 
 
                                         Areaname/Controller name/ action 
                            formaction= "/Products/Home1/formActionHandler" 
                            type="submit" 
                            class="btn-primary"> 
                        View 
                    </button> 
 . . . 
[Areas/Products/Controllers/HomeController.cs] 
. . . 
namespace aspnetcore_3._0.Controllers 
{ 
    [Area("Products")] 
 
    public class Home1Controller : Controller 
   { 
        private readonly ILogger<Home1Controller> _logger; 
 
        public Home1Controller(ILogger<Home1Controller> logger) 
        { 
            _logger = logger; 
        } 
 
        public IActionResult Index() 
        { 
            var Order = OrdersDetails.GetAllRecords(); 
            ViewBag.DataSource = Order; 
            return View(); 
        } 
// here we have redirected the form action 
        public string formActionHandler(formData data) 
        { 
            return "Form submitted, values are \n " + data.OrderID + '\n' +  data.CustomerID; 
        } 
. . . 
 
    public class formData 
    { 
        public string CustomerID { get; set; } 
        public string OrderID { get; set; } 
    } 
} 
 

Also we have prepared a simple sample based on your requirement. Please find the below sample for more information. 


Please get back to us, if you need further assistance. 

Regards, 
Manivel 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon