Currency exchange without reloading page - asp.net

Question

So, I have web application for currency exchange. What I need is to get the result of conversion without reloading the page. In this application I get data from api. After submiting the form page starts to reload and calls HttpGet method again. I get exception because of it. Is there any way to convert currency and do not reload the page?
Model
public class ExchangeRate
{
[JsonProperty("rates")]
public Dictionary<string, double> Rates { get; set; }
[JsonProperty("base")]
public string Base { get; set; }
[JsonProperty("date")]
public DateTimeOffset Date { get; set; }
}
Controller
public class HomeController : Controller
{
[HttpGet]
public async Task<ActionResult> Index()
{
ExchangeRate curencyInfo = new ExchangeRate();
using (HttpClient client = new HttpClient())
{
curencyInfo = await client.GetFromJsonAsync<ExchangeRate>("https://api.exchangeratesapi.io/latest?base=USD");
}
return View(curencyInfo);
}
[HttpPost]
public ActionResult Index(decimal fromCurrency, decimal toCurrency, decimal fromValue)
{
var toValue = toCurrency / fromCurrency * fromValue;
decimal result = Math.Round(toValue, 2);
ViewBag.toValue = result;
return View();
}
}
View
#model WebCurrencyConverter.Models.ExchangeRate
#{
ViewData["Title"] = "Currency Converter";
}
<h1>Currency Converter</h1>
<form method="post">
<select name="fromCurrency">
#foreach (var itemFrom in Model.Rates)
{
<option value="#itemFrom.Value">#itemFrom.Key</option>
}
</select>
<input type="hidden" value="#Model.Rates" />
<select name="toCurrency">
#foreach (var itemTo in Model.Rates)
{
<option value="#itemTo.Value">#itemTo.Key</option>
}
</select>
<input type="number" name="fromValue" step="any" />
<input type="number" name="toValue" value="#ViewBag.toValue" />
<input type="submit" class="btn btn-success" value="Convert" />
</form>

Answer 1

I get exception because of it. Is there any way to convert currency and do not reload the page?
To avoid reloading the page,I think you could use ajax to post data.
Here is a whole working demo:
View:
#model ExchangeRate
#{
ViewData["Title"] = "Currency Converter";
}
<h1>Currency Converter</h1>
<form method="post">
<select name="fromCurrency">
#foreach (var itemFrom in Model.Rates)
{
<option value="#itemFrom.Value">#itemFrom.Key</option>
}
</select>
<input type="hidden" value="#Model.Rates" />
<select name="toCurrency">
#foreach (var itemTo in Model.Rates)
{
<option value="#itemTo.Value">#itemTo.Key</option>
}
</select>
<input type="number" name="fromValue" step="any" />
<input type="number" name="toValue" /> //change here.....
//change the type to button and add the id for button
<input type="button" class="btn btn-success" id="convert" value="Convert" />
</form>
Js in View:
#section Scripts
{
<script>
$("#convert").click(function () {
console.log($('form').serialize());
$.ajax({
url: "/Home/Index",
type: "Post",
data: $('form').serialize(),
success: function (data) {
console.log(data.result);
$('input[name="toValue"]').val(data.result);
}
})
})
</script>
}
Controller:
[HttpGet]
public async Task<ActionResult> Index()
{
ExchangeRate curencyInfo = new ExchangeRate();
curencyInfo.Rates = new Dictionary<string, double>() { };
curencyInfo.Rates.Add("US", 1);
curencyInfo.Rates.Add("Euro", 0.82);
return View(curencyInfo);
}
[HttpPost]
public JsonResult Index(decimal fromCurrency, decimal toCurrency, decimal fromValue)
{
var toValue = toCurrency / fromCurrency * fromValue;
decimal result = Math.Round(toValue, 2);
return Json(new { result = result });
}
Result: