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

submit button in template just reloads the form


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>

7 Replies

PS Pavithra Subramaniyam Syncfusion Team 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. 



JS John Stephen Mangam 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?


PS Pavithra Subramaniyam Syncfusion Team 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. 



JS John Stephen Mangam 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>


JS John Stephen Mangam 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();
            });


JS John Stephen Mangam replied to John Stephen Mangam 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


MS Manivel Sellamuthu Syncfusion Team 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 


Loader.
Up arrow icon