Guide on how to submit x-editable input data in a Razor page

Question

Guide on how to submit x-editable input data in a Razor page

When the submit button is clicked, I would like the form to be sent using the post method. Thank you for your assistance.
Here is the HTML code:

                                <form method="post" class="form-horizontal editor-horizontal">
                                    <div class="form-group">
                                        <div class="col-sm-9">
                                            <a href="#" id="name" data-type="text"
                                               data-pk="1" data-placeholder="Required"
                                               data-title="Enter Your Name"&bt;@Model.Information.Doctor.Name</a>
                                        </div>
                                        <label class="col-sm-3 control-label">Name</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-9">
                                            <a data-pk="1" data-placeholder="Required" data-placement="left"
                                               data-title="Enter Your Last Name" data-type="text"
                                               href="#" id="family" >@Model.Information.Doctor.Family</a>
                                        </div>
                                        <label class="col-sm-3 control-label">Last Name </label>
                                    </div>
                           
                                    <button type="submit" class="btn btn-primary"  >Submit</button>/>
                             </form>

This is my post method:

        public IActionResult OnPost(EditDoctorViewModel command)
        {
           var user= _service.EditDoctor(command);

           return Page();

        }

javascript .net asp.net-core razor-pages x-editable

Answer 1

Answer №1

If you need to submit a form using the post method, make sure to include the appropriate input elements in your view. Below is an example code snippet:

Model:

public class EditDoctorViewModel
    {
        public Information information { get; set; }
    }

public class Information
    {
        public Doctor Doctor { get; set; }
    }

public class Doctor
    {
        public string Name { get; set; }
        public string Family { get; set; }
    }

View:

<form method="post" class="form-horizontal editor-horizontal">
     <div class="form-group">
       <label class="col-sm-3 control-label" >Name</label>
       <input type="text" asp-for="command.information.Doctor.Name" />
     </div>
     <div class="form-group">                             
         <label class="col-sm-3 control-label" >Last Name</label>
         <input type="text" asp-for="command.information.Doctor.Family" />
     </div>
     <button type="submit" class="btn btn-primary">Submit</button>
</form>

Controller:

public EditDoctorViewModel command { get; set; }
public Information Information { get; set; }

public IActionResult OnPost([FromForm]EditDoctorViewModel command)
{
    //var user = _service.EditDoctor(command);

    return Page();
}

You can then retrieve the submitted values in the Post Method. https://i.sstatic.net/18gOQ.png

Answer 2

If you need to submit a form using the post method, make sure to include the appropriate input elements in your view. Below is an example code snippet:

Model:

public class EditDoctorViewModel
    {
        public Information information { get; set; }
    }

public class Information
    {
        public Doctor Doctor { get; set; }
    }

public class Doctor
    {
        public string Name { get; set; }
        public string Family { get; set; }
    }

View:

<form method="post" class="form-horizontal editor-horizontal">
     <div class="form-group">
       <label class="col-sm-3 control-label" >Name</label>
       <input type="text" asp-for="command.information.Doctor.Name" />
     </div>
     <div class="form-group">                             
         <label class="col-sm-3 control-label" >Last Name</label>
         <input type="text" asp-for="command.information.Doctor.Family" />
     </div>
     <button type="submit" class="btn btn-primary">Submit</button>
</form>

Controller:

public EditDoctorViewModel command { get; set; }
public Information Information { get; set; }

public IActionResult OnPost([FromForm]EditDoctorViewModel command)
{
    //var user = _service.EditDoctor(command);

    return Page();
}

You can then retrieve the submitted values in the Post Method. https://i.sstatic.net/18gOQ.png

Guide on how to submit x-editable input data in a Razor page

Answer №1

Similar questions

showing information from a table column

Creating NextJS Route with Dynamic Links for Main Page and Subpages

Can anyone assist with troubleshooting the font size issue for a JavaScript tooltip on Joomla 1.5 with CK Forms?

Problem concerning F# Plotly.NET graph explanations

Upon page reload in Nuxt.js middleware, Firebase authentication is returning as null

Tips for encoding ParsedUrlQuery into a URL-friendly format

Unlocking the Secret: How to Bind a Global Touch Event Handler in Angular 4 to Prevent iOS Safari Page Drag

An error occurred when attempting to hide or show a jQuery loading animation

Collecting all ContextMenuStrips

Assign a value to a locally scoped variable within an iteration in Angular 2

Utilizing BEM Class Names in React

I need the title to be filled with the input data and the content to be filled with the textarea data

TabPanel with Grid component causes Error: The server-rendered UI does not match the initial UI, resulting in failed hydration

Error in Vue Google Maps: Marker not defined

Am I utilizing React hooks correctly in this scenario?

Display div - conceal div - pause for 15 minutes - continue the cycle

Utilizing only JavaScript to parse JSON data

What is the preferred method for transferring server-side data to JavaScript: Using Scriplets or making an AJAX call?

The clash between Kendo UI and jQuery UI

"Exploring the differences between request.body, request.params, and request.query