Use the Tab control in Razor page with database updates

Question

I want to use a Tab control with a minimum of 2 tabs. Only the first tab is initially enabled. After data is entered and saved, by code that runs in a Post method as a result of a Button click, I then want to return to the same page and have the second Tab enabled with the data entry fields on the first Tab disabled but displaying the saved data. I also need to be able to enter data in the second Tab and clack a Button that invokes a Post method. The sample code in the https://ej2.syncfusion.com/aspnetcore/documentation/tab/how-to.html#create-wizard-using-tab page shows how to enable/disable Tabs in client code, but I need a way to do this, and to invoke Post methods for each Tab, in the Razor code behind the page.

Buvana Sathasivam · Answer

Hi Jim, Thanks for using Syncfusion products. We have analyzed your query. We have rendered tab component with two headers. Initially, the first tab is enabled state and the second tab is disabled state using the disable property. In the first tab, we have rendered dropdown list with buttons. If you select all dropdown list and click ‘Search Train’ button, then the server side post method is triggered and created grid data, based on client side selected data. After this ajax post succeeded, we have passed server side created grid data into client side grid datasource. Now, the first tab is disabled state and a second tab is enabled state and select the second tab using select method. If you select any one grid row and click ‘Book’ button, then selected grid data is shown on dialog content using ajax post. Please find the below code. Index.cshtml

HomeController.cs

public class PostData

{

public string Item1 { get; set; }

public string Item2 { get; set; }

public string Item3 { get; set; }

}

public class DialogData

{

public string gridData { get; set; }

}

public class Trains

{

public int TrainNo { get; set; }

public string Name { get; set; }

public string Departure { get; set; }

public string Arrival { get; set; }

public int Availability { get; set; }

}

public ActionResult OnPostSend() // Triggered when click first tab button

{

string sPostValue1 = "";

string sPostValue2 = "";

string sPostValue3 = "";

{

MemoryStream stream = new MemoryStream();

Request.Body.CopyTo(stream);

stream.Position = 0;

using (StreamReader reader = new StreamReader(stream))

{

string requestBody = reader.ReadToEnd();

if (requestBody.Length > 0)

{

var obj = JsonConvert.DeserializeObject<PostData>(requestBody);

if (obj != null)

{

sPostValue1 = obj.Item1;

sPostValue2 = obj.Item2;

sPostValue3 = obj.Item3;

}

int m = Int32.Parse(sPostValue3);

Random rnd = new Random();

for(int i=0; i < m;i++)

{

train.Add(new Trains { TrainNo = ((rnd.Next() * 20) + 19000), Name= "Train " + i, Departure=sPostValue1, Arrival=sPostValue2, Availability= ((rnd.Next() * 20) + 20)

});

}

return new JsonResult(train);

}

public ActionResult OnDialogSend() // Triggered when second tab book button

{

string value1 = "";

{

MemoryStream stream = new MemoryStream();

Request.Body.CopyTo(stream);

stream.Position = 0;

using (StreamReader reader = new StreamReader(stream))

{

string requestBody = reader.ReadToEnd();

if (requestBody.Length > 0)

{

var obj = (requestBody);

if (obj != null)

{

value1 = obj;

}

List<string> lstString = new List<string>{

value1

};

return new JsonResult(value1);

}