How to edit two fields in a table

Question

User1670624291 posted

After being able to present my data, now I want to edit my table Status

My models

public class Order
{
    [Key]
    public int ID_Orders { get; set; }
    public string Details_Orders { get; set; }
}

public class Colors
{
    [Key]
    public int ID_Colors { get; set; }
    public string Name_Colors { get; set; }
    public int ID_Line_Color { get; set; }
    public int ID_Orders { get; set; }
}

public class Quantities
{
    [Key]
    public int ID_Orders { get; set; }
    public int ID_Color_Line { get; set; }
    public string Name_Quantities { get; set; }      
}

public partial class Fabrics
{
    public int ID_Fabrics { get; set; }
    public string Ref{ get; set; }
}

public partial class Status
{
    public int ID_Order { get; set; } 
    public int ID_Color_Line { get; set; } 
    public string Status { get; set; } 
    public string Obs { get; set; }
}

My classes

public class ColorsViewModel
{
    public Orders order { get; set; }
    public Fabrics fabric { get; set; }
    public List<ColorsAndQuantities> colers { get; set; }
}

public class ColorsAndQuantities
{
    public Colors coler { get; set; }
    public List<QuantitiesAndStatus> quants { get; set; }
    public List<Status> status { get; set; }
}

I tried to replicate this example but it didn't work

https://forums.asp.net/t/2173078.aspx?Fill+a+dropdown

Thanks for help,

Answer 1

User1686398519 posted

Hi MiguelMi, 

What is the problem with you? If you know the jquery selector, then you will easily understand the solution in this post.

Can you tell me which part of the code you don't understand?

Best Regards,

YihuiSun

Answer 2

User1670624291 posted

I dont understand the structure
dont i need any function on my controller with this one?

public ActionResult Edit()
        {
            if (ModelState.IsValid)
            {
                db.Entry(Orders).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(Orders);
        }

I dont understand where the database is being requested in script

 var community = @Html.Raw(Json.Encode(Model.ToList()[0].Community)); ???????

What if in my example I have to reference my class or just the status model?

sorry if i look confused, because it is the first one that i am coding something for asp.net and learn at the same time

Answer 3

User1686398519 posted

Hi MiguelMi, 

@Html.Raw:Returns markup that is not HTML encoded.

To be honest, there are many ways to achieve your needs. I wrote an example, you can refer to it, and modify it according to your needs.You can check the links below to help you understand the example I gave.

1. Jquery Selectors
2. ForeignKey Attribute 

Model

    public class OrderViewModel
    {
        public List<Order> OrderList { get; set; }
        public List<Status> StatusList { get; set; }
    }
    public class Order
    {
        [Key]
        public int ID_Orders { get; set; }
        public string Details_Orders { get; set; }
        public List<Colors> Colors { get; set; }
    }

    public class Colors
    {
        [Key]
        public int ID_Colors { get; set; }
        public string Name_Colors { get; set; }
        public int ID_Line_Color { get; set; }
        public int ID_Orders { get; set; }
        [ForeignKey("ID_Orders")]
        public Order Order { get; set; }
        public  List<Quantities> Quantities { get; set; }
    }

    public class Quantities
    {
        [Key]
        public int ID_Quantities { get; set; }
        public string Name_Quantities { get; set; }
        public int ID_Color_Line { get; set; }
        [ForeignKey("ID_Color_Line")]
        public Colors Colors { get; set; }
        public int ID_Status { get; set; }
        [ForeignKey("ID_Status")]
        public Status Status { get; set; }
    }
    public class Status
    {
        [Key]
        public int ID_Status { get; set; }
        public string StatusName { get; set; }
        public string Obs { get; set; }
        public List<Quantities> Quantities { get; set; }
    }

Controller

        public DailyMVCDemoContext db = new DailyMVCDemoContext();
        public ActionResult Index()
        {
            OrderViewModel model = new OrderViewModel
            {
                OrderList = db.Orders
                .Include(m => m.Colors.Select(i => i.Quantities.Select(s => s.Status)))
                .ToList(),
                StatusList = db.Status.ToList()
            };
            return View(model);
        }
        [HttpPost]
        public ActionResult Edit(int ID_Status,int ID_Quantities)
        {
            var flag = false;
            try
            {
                var q = db.Quantities.Include(m => m.Colors.Order).Where(m => m.ID_Quantities == ID_Quantities).FirstOrDefault();
                q.ID_Status = ID_Status;
                db.Entry(q).State = EntityState.Modified;
                db.SaveChanges();
                flag = true;
            }
            catch(Exception e)
            {
                flag = false;
            }
            return Json(flag,JsonRequestBehavior.AllowGet);
        }
        [HttpPost]
        public ActionResult getObs(int ID_Status)
        {
            var result = db.Status.Where(m => m.ID_Status==ID_Status).Select(m=>m.Obs).FirstOrDefault();
            return Json(result, JsonRequestBehavior.AllowGet);
        }
        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

View

@model DailyMVCDemo2.Models.OrderViewModel
<table class="table table-borderless table-sm" id="ordertable">
    @for (var p = 0; p < Model.OrderList.Count(); p++)
    { 
        <tr>
            <td>@p</td>
            <td>
                <table class="table table-bordered ordertable">
                    <tr style="border-top: 2px solid #cdd0d4;">
                        <td style="width: 130px;">
                            <b>Artigo: </b>@Model.OrderList[p].ID_Orders
                        </td>
                        <td colspan="8">
                            <b>Modelo: </b>@Model.OrderList[p].Details_Orders
                        </td>
                    </tr>
                    @for (var j = 0; j < Model.OrderList[p].Colors.Count(); j++)
                    {
                        <tr>
                            <td style="width: 150px;">
                                @Model.OrderList[p].Colors[j].ID_Colors -ID_Line_Color @Model.OrderList[p].Colors[j].ID_Line_Color
                            </td>
                            <td>
                                <table class="table table-borderless">

                                    @for (var i = 0; i < Model.OrderList[p].Colors[j].Quantities.Count(); i++)
                                    {
                                        <tr>
                                            <td>
                                                @*@Html.HiddenFor(m => Model.OrderList[p].ID_Orders)
                                                @Html.HiddenFor(m => Model.OrderList[p].Colors[j].ID_Colors)*@
                                                @Html.HiddenFor(m => Model.OrderList[p].Colors[j].Quantities[i].ID_Quantities)
                                                @Model.OrderList[p].Colors[j].Quantities[i][e-mail][p].Colors[j].Quantities[i].Name_Quantities
                                            </td>
                                            <td>
                                                @Html.DropDownListFor(m => @Model.OrderList[p].Colors[j].Quantities[i].ID_Status,
         new SelectList(Model.StatusList, "ID_Status", "StatusName", @Model.OrderList[p].Colors[j].Quantities[i].ID_Status), "Please Select", new { @class="statusselect",disabled = true })
                                            </td>
                                            <td>@Html.TextBoxFor(m => @Model.OrderList[p].Colors[j].Quantities[i].Status.Obs, new { @class = "forms-control", disabled = true })</td>

                                            <td>
                                                <button class="btn ToEditbtn"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button>
                                                <button class="btn Editbtn" style="display:none"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button>
                                            </td>
                                        </tr>
                                    }
                                </table>
                            </td>
                        </tr>
                    }
                </table>
            </td>
        </tr>
    }
</table>
@section scripts{
    <script>
        $(function () {
            $("#ordertable").on("click", ".ToEditbtn", function () {
                $(this).hide();
                var currenttr = $(this).closest("tr");
                currenttr.find(".Editbtn").show();
                currenttr.find("select").prop("disabled", false);
                currenttr.find("input[name*='Obs']").prop("disabled", false);
            });
            $("#ordertable").on("click", ".Editbtn", function () {
                $(this).hide();
                var currenttr = $(this).closest("tr");
                currenttr.find(".ToEditbtn").show();
                currenttr.find("select").prop("disabled", true);
                currenttr.find("input[name*='Obs']").prop("disabled", true);
                var ID_Status = currenttr.find("select[name*='ID_Status']").val();
                var ID_Quantities = currenttr.find("input[name*='ID_Quantities']").val();
                $.ajax({
                    url: "@Url.Action("Edit")",
                    type:"POST",
                    data: {ID_Status:ID_Status,ID_Quantities:ID_Quantities },
                    success: function (data) {
                        alert(data);
                    }

                });
            });
            $("#ordertable").on("change", ".statusselect", function () {
                var Obs = $(this).parent().next().find("input[name*='Obs']");
                $.ajax({
                    url: "@Url.Action("getObs")",
                    type: "POST",
                    data: { ID_Status:$(this).val()},
                    success: function (data) {
                        console.log(data)
                        Obs.val(data);
                    }
                });
            });
        });
    </script>
}

Here is the result. 

Best Regards,

YihuiSun

Answer 4

User1670624291 posted

I am trying to replicate the above method by adapting my classes

I think my view is working once I can close open the Status and Obs field

I in my status table I don't have a main id (as represented in the model) only the id_orders and id_line_orders, what I tried below was to guide me through id_line_orders but it wasn't working.

a question, will I have to build a join also in my Edit?

[HttpPost]
        public ActionResult Edit(int ID_Status, int ID_Quantities)
        {
            var flag = false;
            try
            {
                var q = db.Status.Include(m => m.id_line_color).Where(m => m.id_line_color== ID_Quantities).FirstOrDefault();
                q.id_line_color= ID_Status;
                db.Entry(q).State = EntityState.Modified;
                db.SaveChanges();
                flag = true;
            }
            catch (Exception e)
            {
                flag = false;
            }
            return Json(flag, JsonRequestBehavior.AllowGet);
        }
        [HttpPost]
        public ActionResult getObs(int ID_Status)
        {
            var result = db.Status.Where(m => m.id_line_color== ID_Status).Select(m => m.Obs).FirstOrDefault();
            return Json(result, JsonRequestBehavior.AllowGet);
        }
        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

another thing I'm trying to do is correct the controller because the Status and Obs field have to be free, just keep informing in the field

Thanks,

Answer 5

User1686398519 posted

Hi MiguelMi, 

1. Your initial question is how to edit the two fields marked on your picture. You only need to learn more about the js code in the example I provided earlier.

2. MiguelMi

   a question, will I have to build a join also in my Edit?

   1. Based on the code and pictures you provided before, I speculate that there is the following relationship between these tables.
      • 

   2. MiguelMi

      because the Status and Obs field have to be free,

      • But according to your latest reply, it seems that there is no relationship between Status and other tables.

   3. MiguelMi

      Include(m => m.id_line_color)

      • Why use Include in the example I gave?
        1. As I mentioned above, because I speculate that there is a relationship between Status and other tables based on the code and pictures you provided,so I need to use Include to load related entities.
        2. You can check the example I provided earlier:

           • db.Quantities.Include(m => m.Colors.Order)

           • If you have read the link about foreign keys provided earlier, you should be able to understand the usage of Include.
           • In other words, the Order in "public Order Order {get; set; }" is a navigation property.
3. Finally, you can learn about some of the links I provided, which will help you. If it is convenient, can you tell me whether there is a relationship between your tables?

   Best Regards,

   YihuiSun

Answer 6

User1670624291 posted

Yes, the tables share the ID_Order and ID_Line_Color, when I created the Table Status I decided to clone the ids fields to maintain the position of the fields in relation to the Table Quantities  so I use my join:

var result2 = (from r1 in result1
                           from c in r1.colors
                           join q in quant
                             on new { orderId = c.ID_Programa, colorlineId = c.ID_Linha_Cor } equals new { orderId = q.ID_Programa, colorlineId = q.ID_Linha_Cor } into p1
                           from p in p1
                           join s in statu
                             on new { orderId = p.ID_Programa, colorlineId = p.ID_Linha_Cor } equals new { orderId = s.ID_Programa, colorlineId = s.ID_Linha_Cor } into q
                           group new ColorsAndQuantities { coler = c, quant = p1.ToList(), status = q.ToList() } by c.ID_Programa).ToList();

In my Status and Obs fields I intend to write independent information, but I need the relationship with my Table Quantities to maintain the position.

Color (Table Colors) --> Quantities (Table Quantities) --> Status (Table Status) --> Obs (Table Status)

Thanks again

Answer 7

User1686398519 posted

Hi MiguelMi, 

I want to confirm with you:

1. Did the js code in the example provided earlier solve your initial problem: edit two fields.
   1. In other words, your question now is how to modify the data in the database after transferring the data from the view to the action?
   2. var q = db.Quantities.Include(m => m.Colors.Order).Where(m => m.ID_Quantities == ID_Quantities).FirstOrDefault();
      1. Here is to query the data that currently needs to be modified, and then modify it.The query method in my example can only be used when foreign keys and navigation properties have been set.
      2. You can use your own methods, such as using join to query the data that needs to be modified, and then modify it.

Best Regards,

YihuiSun

Answer 8

User1670624291 posted

Yes, editing the fields with script works well, now my problem is to modify the data.

[HttpPost]
        public ActionResult UpdateStatus(Programa_Cor_Info_Status status)
        {

            using (BaluEntities entities = new BaluEntities())
            {
                Programa_Cor_Info_Status updatedStatus = (from c in entities.Programa_Cor_Info_Status
                                            where c.ID_Info == status.ID_Info
                                            select c).FirstOrDefault();
                updatedStatus.Status = status.Status;
                updatedStatus.Obs = status.Obs;
                entities.SaveChanges();
            }
            return new EmptyResult();
        }

@section scripts{
    <script>
        $(function () {
            $("#ordertable").on("click", ".ToEditbtn", function () {
                $(this).hide();
                var currenttr = $(this).closest("tr");
                currenttr.find(".Editbtn").show();
                currenttr.find("input[name*='Status']").prop("disabled", false);
                currenttr.find("input[name*='Obs']").prop("disabled", false);
            });
            //update
            $("#ordertable").on("click", ".Editbtn", function () {
                $(this).hide();
                var currenttr = $(this).closest("tr");
                currenttr.find(".ToEditbtn").show();
                currenttr.find("input[name*='Status']").prop("disabled", true);
                currenttr.find("input[name*='Obs']").prop("disabled", true);

                var status = {};
                status.Status = row.find(".forms-control").find("span").html();
                status.Obs = row.find(".forms-control").find("span").html();

                $.ajax({
                    url: "@Url.Action("UpdateStatus")",
                    type:"POST",
                    data: {Status:Status,Obs:Obs },
                    success: function (data) {
                        alert(data);
                    }

                });
            });
            
        });
    </script>
}

The data is already being presented, but I want to modify it.

My question is this function of changing the data is done in the script based on my controller, correct? or script is only presentation of the fields? no reference to a database?

Thank you so much

Answer 9

User1670624291 posted

I tried using another method, I load the data in the post but it doesn't save in the database :(

Controller:

[HttpPost]
        public JsonResult AjaxPostCall(Programa_Cor_Info_Status statusData)
        {
            Programa_Cor_Info_Status status = new Programa_Cor_Info_Status
            {
                Status = statusData.Status,
                Obs = statusData.Obs,
                
            };
            return Json(status, JsonRequestBehavior.AllowGet);
        }

View:

@section scripts{
    <script>
        $(function () {
            $("#ordertable").on("click", ".ToEditbtn", function () {
                $(this).hide();
                var currenttr = $(this).closest("tr");
                currenttr.find(".Editbtn").show();
                currenttr.find("input[name*='Status']").prop("disabled", false);
                currenttr.find("input[name*='Obs']").prop("disabled", false);
            });
            //update
            $("#ordertable").on("click", ".Editbtn", function () {
                var status = new Object();
                status.Status = $("input[name*='Status']").val();
                status.Obs = $("input[name*='Obs']").val();
                if (status != null) {
                    $.ajax({
                        type: "POST",
                        url: "/Home/AjaxPostCall",
                        data: JSON.stringify(status),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            if (response != null) {
                                alert("Status : " + response.Status + ", Obs : " + response.Obs);
                            } else {
                                alert("Something went wrong");
                            }
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        },
                        error: function (response) {
                            alert(response.responseText);
                        }
                    });
                }
                $(this).hide();
                var currenttr = $(this).closest("tr");
                currenttr.find(".ToEditbtn").show();
                currenttr.find("input[name*='Status']").prop("disabled", true);
                currenttr.find("input[name*='Obs']").prop("disabled", true);

            });
        });
    </script>
}

Answer 10

User1686398519 posted

Hi MiguelMi, 

1. MiguelMi

   public JsonResult AjaxPostCall(Programa_Cor_Info_Status statusData)

   • Because you did not write code to modify the data, the data in the database will not be modified.
2. My question is this function of changing the data is done in the script based on my controller, correct? or script is only presentation of the fields? no reference to a database?
   1. In fact, you need to write code to modify the data in the action. The js code on the view is used to pass the modified data to the action.
   2. If you are also using EF, you can check the example I provided before, how to modify the data in the database.
      1. "q" is the piece of data that needs to be modified.

      2. var q = ... ...//query to get the piece of data that needs to be modified.
         q.ID_Status = ID_Status;
         db.Entry(q).State = EntityState.Modified; 
         db.SaveChanges();

Note: If the problem with the current post has been resolved, you can submit a new post to describe the new problem in detail for better help.

Best Regards,

YihuiSun

Answer 11

User1670624291 posted

Hi,

with the proposed structure

[HttpPost]
        public ActionResult Edit(int ID_Status)
        {
            var flag = false;
            try
            {

                var q = db.Programa_Cor_Info_Status.Where(m => m.ID_Info == ID_Status).FirstOrDefault();
                q.ID_Info = ID_Status;
                db.Entry(q).State = EntityState.Modified;
                db.SaveChanges();
                flag = true;
            }
            catch (Exception e)
            {
                flag = false;
            }
            return Json(flag, JsonRequestBehavior.AllowGet);
        }
        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

@section scripts{
    <script>
        $(function () {
            $("#ordertable").on("click", ".ToEditbtn", function () {
                $(this).hide();
                var currenttr = $(this).closest("tr");
                currenttr.find(".Editbtn").show();
                currenttr.find("input[name*='Status']").prop("disabled", false);
                currenttr.find("input[name*='Obs']").prop("disabled", false);
            });
            //update
             $("#ordertable").on("click", ".Editbtn", function () {
                $(this).hide();
                var currenttr = $(this).closest("tr");
                currenttr.find(".ToEditbtn").show();
                currenttr.find("input[name*='Status']").prop("disabled", true);
                currenttr.find("input[name*='Obs']").prop("disabled", true);
                 var ID_Status = currenttr.find("select[name*='Status']").val();
                $.ajax({
                    url: "/Home/Edit",
                    type:"POST",
                    data: { ID_Info:ID_Status },
                    success: function (data) {
                        alert(data);
                    }

                });
            });
        });
    </script>
}

<td colspan="2" id="Status">
                                    @foreach (var item4 in item2.status)
                                    {
                                        @Html.TextBoxFor(m => @item4.Status, new { @class = "forms-control", disabled = true })
                                        }
                                    </td>

                                <td colspan="5" id="Obs">
                                    @foreach (var item4 in item2.status)
                                    {
                                        @Html.TextBoxFor(m => @item4.Obs, new { @class = "forms-control", disabled = true })
                                    }
                                </td>

gives no sign of the post :(

it will be better to open a new post with clean information

Thanks

Answer 12

User1670624291 posted

One more resolved !!!
thanks YihuiSun

[HttpPost]
        public JsonResult EditPost(Programa_Cor_Info_Status statusData)
        {

            Programa_Cor_Info_Status status = new Programa_Cor_Info_Status()
            {
                ID_Info = statusData.ID_Info,
                ID_Programa = statusData.ID_Programa,
                ID_Linha_Cor = statusData.ID_Linha_Cor,
                Talão = statusData.Talão,
                Status = statusData.Status,
                Obs = statusData.Obs,
            };
            db.Entry(status).State = EntityState.Modified;
            db.SaveChanges();
            return Json(status, JsonRequestBehavior.AllowGet);