1. Home
  2. Forum
  3. Vue
  4. get/post Data into mysql database

get/post Data into mysql database

İ want to add some editable grid tables with a button called “new table” in Vue. I haven’t found any example or something else. 

And then the User get or post datas into/from my mysql database. How I can do this. What I have to prepare? 


thankful for any reply





3 Replies
TS Thavasianand Sankaranarayanan Syncfusion Team May 7, 2019 12:31 PM UTC

Hi Nurhan, 

Greetings from Syncfusion support. 

We have analyzed your query. We suggest you to refer to the following documentation links for more details, 
Documentation :  
 

Please get back to us if you need further assistance. 

Regards, 
Thavasianand S. 


NA Nurhan Aydogdu May 9, 2019 09:00 AM UTC


Hi Thavasianand,

thank you for reply.
maybe you can show me any example about this Problem. 
Actually i have a button which has to generate datagrids on click in cavas (ejsdiagram). İ want to add not only one grid rather more as many as needed when i click the button. 
İn Vue i couldnt add datagrids on click. how can i do this. İ have a solution in Javascript which works. But ı need this case as vue not in javascript. 


Also i need  a mysqldatabase connection for each created datagrid.  The link above are not clear for me. İ have installed mysql with a localinstance(3306), msqlworkbench and nodejs. Then i have create a server.js folder which is connected with my database. İ can create about this file Tables and so on. İt works fine. But yet i need the client server connection i mean. How i can do this? 

One unclear codesnippet. What are these Urls. Are they vue files in the project? How they looks like? 

    data: new DataManager({
        url: "Home/DataSource",
        updateUrl: "Home/Update",
        insertUrl: "Home/Insert",
        removeUrl: "Home/Delete",
        adaptor: new UrlAdaptor
    }),

another question where should i use this code?

public ActionResult DataSource(DataManager dm)
{
    var DataSource = OrderRepository.GetAllRecords();
    DataResult result = new DataResult();
    result.result = DataSource.Skip(dm.Skip).Take(dm.Take).ToList();
    result.count = result.result.Count;
    return Json(result, JsonRequestBehavior.AllowGet);
}

public class DataResult
{
    public List<EditableOrder> result { get; set; }
    public int count { get; set; }
}

when i want to perform a insert operation on the server-side. How and where i should to use this example: 

public ActionResult Insert(EditableOrder value)
{
    //Insert record in database
}
Please give me more details and any example about my questions. 
 

TS Thavasianand Sankaranarayanan Syncfusion Team May 13, 2019 07:03 AM UTC

Hi Nurhan, 

Query 1 : In Vue i couldn’t add dataGrids on click. 
Based on this requirement, we have prepared a sample, in which we will be adding the Grid each time when the button is clicked. Please find the sample from the link below, 

Query 2 : But yet i need the client server connection i mean. 
We have analyzed your query. Based on your request, we have prepared a sample to perform CRUD actions at server side in Vue platform. Please download the sample form the link below, 
                                          
Please refer the code example below, 
[fetchdata.vue.html] 
 
        <ejs-grid :dataSource="data" height="auto" width="540" :toolbar="toolbar" :editSettings="editSettings"> 
             ... 
        </ejs-grid> 
 
[fetchdata.ts] 
 
    data: () => { 
        return { 
            toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 
            data: new DataManager({ 
                url: "Home/UrlDatasource", 
                updateUrl: "Home/Update", 
                insertUrl: "Home/Insert", 
                removeUrl: "Home/Delete", 
                adaptor: new UrlAdaptor() 
            }), 
       }; 
    }, 
 
[HomeController.cs] 
 
        public IActionResult UrlDatasource([FromBody]DataManagerRequest dm) 
        { 
            ... 
           return Json(new { result = DataSource, count = count }); 
        } 
        public ActionResult Update([FromBody]ICRUDModel<OrdersDetails> value) 
        { 
            ... 
            return Json(value.value); 
        } 
       public ActionResult Insert([FromBody]ICRUDModel<OrdersDetails> value) 
        { 
 
            ... 
            return Json(value.value); 
        } 
       public ActionResult Delete([FromBody]ICRUDModel<OrdersDetails> value) 
        { 
            ... 
            return Json(value); 
        } 
 
 
We also suggest you to refer to the below documentation for more details on handling on demand grid actions, 

Please get back to us if you need further assistance. 

Regards, 
Thavasianand S. 


Loader.
Up arrow icon