submit button in template just reloads the form

[John Stephen Mangam]

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]

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, 

 

Reference Link: https://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit  

 

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]

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

[Pavithra Subramaniyam]

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]

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]

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]

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]

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. 

Sample: https://www.syncfusion.com/downloads/support/forum/149710/ze/152214-area-form_-_sample-55126657.zip 

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

Regards, 

Manivel