V47 V47 - 4 months ago 8
Javascript Question

Get Id for updating values by jquery

I have a very simple page, that shows answers of a question.
When a user click on "Useful" or "Useless" button , i want to get that answer's Id and update useful or useless field in DB using jQuery. My problem is how can i get each AnswerId using jQuery?

Here is AnswerModel:

public class Answer
{
public int AnswerId { get; set; }

[Required]
[StringLength(500)]
public string Reply { get; set; }

public int Useful { get; set; }

public int Useless { get; set; }
}


Here is AnswerController:

public async Task<ActionResult> Index()
{
return(await db.Answers.toListAsync());
}

public async Task<JsonResult> Helpful(int? ansId, int? useful, int? uselees)
{
Answer model = await db.Answers.FindAsync(ansId);
if (model != null)
{
model.Useful = model.Useful + (int)useful;
model.Useless = model.Useless + (int)useless;
db.Entry(model).State = EntityState.Modified;
await db.SaveChangesAsync();
return Json(new { Success = true }, JsonRequestBehavior.AllowGet);
}
return Json(new { Success = false }, JsonRequestBehavior.AllowGet);
}


Here is Index View:

@model IEnumerable<project.Models.Answer>

@foreach (var item in Model)
{
<table class="table">
<tr>
<td>
Reply: @item.Reply
</td>
<th>
<input type="button" id="usfBtn" value="Useful" />
</th>
<th>
<input type="button" id="uslBtn" value="Useless" />
</th>
</tr>
</table>
}


And here is the script:

$(function() {
$("#usfBtn").click(function () {
Usf(Alarm);
});
$("#uslBtn").click(function () {
Usl(Alarm);
});
function Usf(callback) {
$.ajax(
{
type: "Get",
url: "/Answer/Helpful",
data: {
useful: 1,
useless: 0,
},
dataType: "json",
success: function (result) {
callback(result);
}
});
}
function Usl(callback) {
$.ajax(
{
type: "Get",
url: "/Answer/Helpful",
data: {
useful: 0,
useless: 1,
},
dataType: "json",
success: function (result) {
callback(result);
}
});
}
function Alarm(arg) {
if (arg.Success) {
window.location.href = window.location.pathname;
}
}
});


My question is how can i get each Answer's Id while i have just one button Id for all of them ("usfBtn" or "uslBtn")?

Answer

You can keep the answer id the data attribute of the button.

<table class="table">
@foreach (var item in Model)
{ 
    <tr>
        <td>
            Reply: @item.Reply
        </td>                
        <th>
            <input type="button" data-aid="@item.Id" class="u" 
                        data-mode="useful"  value="Useful" />
        </th>
        <th>
            <input type="button" data-aid="@item.Id" class="u" 
                       data-mode="useless" value="Useless" />
        </th>
    </tr>
}
</table>

Now read the data attribute values and send it to the server

$(function(){

  $("input.u").click(function(e){
     e.preventDefault();
     var s= { ansId : $(this).data("aid"), useful :0, useless:0 };
     if($(this).data("mode")=="useful")
     {
       s.useful = 1;
     }
     else if($(this).data("mode")=="useless")
     {
       s.useless = 1;
     }
     //post this object now
     $.post("/Answer/Helpful",s,function(res){
        //do something with response.
     });

  });

});
Comments